@octanejs/radix 0.1.32 → 0.1.33
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/cjs/AccessibleIcon.cjs +56 -0
- package/dist/cjs/Accordion.cjs +272 -0
- package/dist/cjs/AlertDialog.cjs +144 -0
- package/dist/cjs/Arrow.cjs +43 -0
- package/dist/cjs/AspectRatio.cjs +56 -0
- package/dist/cjs/Avatar.cjs +150 -0
- package/dist/cjs/Checkbox.cjs +281 -0
- package/dist/cjs/Collapsible.cjs +176 -0
- package/dist/cjs/ContextMenu.cjs +315 -0
- package/dist/cjs/Dialog.cjs +291 -0
- package/dist/cjs/DismissableLayer.cjs +382 -0
- package/dist/cjs/DropdownMenu.cjs +296 -0
- package/dist/cjs/FocusScope.cjs +257 -0
- package/dist/cjs/Form.cjs +537 -0
- package/dist/cjs/HoverCard.cjs +309 -0
- package/dist/cjs/Label.cjs +42 -0
- package/dist/cjs/Menu.cjs +925 -0
- package/dist/cjs/Menubar.cjs +475 -0
- package/dist/cjs/NavigationMenu.cjs +942 -0
- package/dist/cjs/OneTimePasswordField.cjs +729 -0
- package/dist/cjs/PasswordToggleField.cjs +377 -0
- package/dist/cjs/Popover.cjs +340 -0
- package/dist/cjs/Popper.cjs +368 -0
- package/dist/cjs/Portal.cjs +40 -0
- package/dist/cjs/Presence.cjs +183 -0
- package/dist/cjs/Primitive.cjs +63 -0
- package/dist/cjs/Progress.cjs +111 -0
- package/dist/cjs/Radio.cjs +240 -0
- package/dist/cjs/RadioGroup.cjs +216 -0
- package/dist/cjs/RovingFocusGroup.cjs +253 -0
- package/dist/cjs/ScrollArea.cjs +828 -0
- package/dist/cjs/Select.cjs +1429 -0
- package/dist/cjs/Separator.cjs +51 -0
- package/dist/cjs/Slider.cjs +634 -0
- package/dist/cjs/Slot.cjs +97 -0
- package/dist/cjs/Switch.cjs +253 -0
- package/dist/cjs/Tabs.cjs +195 -0
- package/dist/cjs/Toast.cjs +733 -0
- package/dist/cjs/Toggle.cjs +54 -0
- package/dist/cjs/ToggleGroup.cjs +174 -0
- package/dist/cjs/Toolbar.cjs +165 -0
- package/dist/cjs/Tooltip.cjs +628 -0
- package/dist/cjs/VisuallyHidden.cjs +52 -0
- package/dist/cjs/collection.cjs +95 -0
- package/dist/cjs/compose-event-handlers.cjs +35 -0
- package/dist/cjs/compose-refs.cjs +68 -0
- package/dist/cjs/context.cjs +96 -0
- package/dist/cjs/direction.cjs +41 -0
- package/dist/cjs/focus-guards.cjs +76 -0
- package/dist/cjs/index.cjs +174 -0
- package/dist/cjs/internal.cjs +51 -0
- package/dist/cjs/scroll-lock.cjs +67 -0
- package/dist/cjs/use-callback-ref.cjs +47 -0
- package/dist/cjs/use-effect-event.cjs +52 -0
- package/dist/cjs/use-is-hydrated.cjs +43 -0
- package/dist/cjs/use-previous.cjs +47 -0
- package/dist/cjs/use-size.cjs +69 -0
- package/dist/cjs/useControllableState.cjs +80 -0
- package/dist/cjs/useId.cjs +36 -0
- package/package.json +14 -7
|
@@ -0,0 +1,628 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var Tooltip_exports = {};
|
|
30
|
+
__export(Tooltip_exports, {
|
|
31
|
+
Arrow: () => Arrow,
|
|
32
|
+
Content: () => Content,
|
|
33
|
+
Portal: () => Portal,
|
|
34
|
+
Provider: () => Provider,
|
|
35
|
+
Root: () => Root,
|
|
36
|
+
Tooltip: () => Root,
|
|
37
|
+
TooltipProvider: () => Provider,
|
|
38
|
+
Trigger: () => Trigger,
|
|
39
|
+
createTooltipScope: () => createTooltipScope
|
|
40
|
+
});
|
|
41
|
+
module.exports = __toCommonJS(Tooltip_exports);
|
|
42
|
+
var import_octane = require("octane");
|
|
43
|
+
var import_compose_event_handlers = require("./compose-event-handlers.cjs");
|
|
44
|
+
var import_compose_refs = require("./compose-refs.cjs");
|
|
45
|
+
var import_context = require("./context.cjs");
|
|
46
|
+
var import_DismissableLayer = require("./DismissableLayer.cjs");
|
|
47
|
+
var import_internal = require("./internal.cjs");
|
|
48
|
+
var PopperPrimitive = __toESM(require("./Popper.cjs"), 1);
|
|
49
|
+
var import_Popper = require("./Popper.cjs");
|
|
50
|
+
var import_Portal = require("./Portal.cjs");
|
|
51
|
+
var import_Presence = require("./Presence.cjs");
|
|
52
|
+
var import_Primitive = require("./Primitive.cjs");
|
|
53
|
+
var import_useControllableState = require("./useControllableState.cjs");
|
|
54
|
+
var import_useId = require("./useId.cjs");
|
|
55
|
+
var VisuallyHiddenPrimitive = __toESM(require("./VisuallyHidden.cjs"), 1);
|
|
56
|
+
const [createTooltipContext, createTooltipScope] = (0, import_context.createContextScope)("Tooltip", [
|
|
57
|
+
import_Popper.createPopperScope
|
|
58
|
+
]);
|
|
59
|
+
const usePopperScope = (0, import_Popper.createPopperScope)();
|
|
60
|
+
const DEFAULT_DELAY_DURATION = 700;
|
|
61
|
+
const TOOLTIP_OPEN = "tooltip.open";
|
|
62
|
+
const [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext("TooltipProvider");
|
|
63
|
+
function Provider(props) {
|
|
64
|
+
const slot = (0, import_internal.S)("Tooltip.Provider");
|
|
65
|
+
const {
|
|
66
|
+
__scopeTooltip,
|
|
67
|
+
delayDuration = DEFAULT_DELAY_DURATION,
|
|
68
|
+
skipDelayDuration = 300,
|
|
69
|
+
disableHoverableContent = false,
|
|
70
|
+
children
|
|
71
|
+
} = props ?? {};
|
|
72
|
+
const isOpenDelayedRef = (0, import_octane.useRef)(true, (0, import_internal.subSlot)(slot, "delayed"));
|
|
73
|
+
const isPointerInTransitRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "transit"));
|
|
74
|
+
const skipDelayTimerRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "timer"));
|
|
75
|
+
(0, import_octane.useEffect)(
|
|
76
|
+
() => {
|
|
77
|
+
const skipDelayTimer = skipDelayTimerRef.current;
|
|
78
|
+
return () => window.clearTimeout(skipDelayTimer);
|
|
79
|
+
},
|
|
80
|
+
[],
|
|
81
|
+
(0, import_internal.subSlot)(slot, "e:cleanup")
|
|
82
|
+
);
|
|
83
|
+
return (0, import_octane.createElement)(TooltipProviderContextProvider, {
|
|
84
|
+
scope: __scopeTooltip,
|
|
85
|
+
isOpenDelayedRef,
|
|
86
|
+
delayDuration,
|
|
87
|
+
onOpen: (0, import_octane.useCallback)(
|
|
88
|
+
() => {
|
|
89
|
+
if (skipDelayDuration <= 0) return;
|
|
90
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
91
|
+
isOpenDelayedRef.current = false;
|
|
92
|
+
},
|
|
93
|
+
[skipDelayDuration],
|
|
94
|
+
(0, import_internal.subSlot)(slot, "onOpen")
|
|
95
|
+
),
|
|
96
|
+
onClose: (0, import_octane.useCallback)(
|
|
97
|
+
() => {
|
|
98
|
+
if (skipDelayDuration <= 0) return;
|
|
99
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
100
|
+
skipDelayTimerRef.current = window.setTimeout(
|
|
101
|
+
() => isOpenDelayedRef.current = true,
|
|
102
|
+
skipDelayDuration
|
|
103
|
+
);
|
|
104
|
+
},
|
|
105
|
+
[skipDelayDuration],
|
|
106
|
+
(0, import_internal.subSlot)(slot, "onClose")
|
|
107
|
+
),
|
|
108
|
+
isPointerInTransitRef,
|
|
109
|
+
onPointerInTransitChange: (0, import_octane.useCallback)(
|
|
110
|
+
(inTransit) => {
|
|
111
|
+
isPointerInTransitRef.current = inTransit;
|
|
112
|
+
},
|
|
113
|
+
[],
|
|
114
|
+
(0, import_internal.subSlot)(slot, "transitChange")
|
|
115
|
+
),
|
|
116
|
+
disableHoverableContent,
|
|
117
|
+
children
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
const [TooltipContextProvider, useTooltipContext] = createTooltipContext("Tooltip");
|
|
121
|
+
function Root(props) {
|
|
122
|
+
const slot = (0, import_internal.S)("Tooltip.Root");
|
|
123
|
+
const {
|
|
124
|
+
__scopeTooltip,
|
|
125
|
+
children,
|
|
126
|
+
open: openProp,
|
|
127
|
+
defaultOpen,
|
|
128
|
+
onOpenChange,
|
|
129
|
+
disableHoverableContent: disableHoverableContentProp,
|
|
130
|
+
delayDuration: delayDurationProp
|
|
131
|
+
} = props ?? {};
|
|
132
|
+
const providerContext = useTooltipProviderContext("Tooltip", __scopeTooltip);
|
|
133
|
+
const popperScope = usePopperScope(__scopeTooltip, (0, import_internal.subSlot)(slot, "popper"));
|
|
134
|
+
const [trigger, setTrigger] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "trigger"));
|
|
135
|
+
const contentId = (0, import_useId.useId)((0, import_internal.subSlot)(slot, "id"));
|
|
136
|
+
const openTimerRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "timer"));
|
|
137
|
+
const disableHoverableContent = disableHoverableContentProp ?? providerContext.disableHoverableContent;
|
|
138
|
+
const delayDuration = delayDurationProp ?? providerContext.delayDuration;
|
|
139
|
+
const wasOpenDelayedRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "wasDelayed"));
|
|
140
|
+
const [open, setOpen] = (0, import_useControllableState.useControllableState)(
|
|
141
|
+
{
|
|
142
|
+
prop: openProp,
|
|
143
|
+
defaultProp: defaultOpen ?? false,
|
|
144
|
+
onChange: (isOpen) => {
|
|
145
|
+
if (isOpen) {
|
|
146
|
+
providerContext.onOpen();
|
|
147
|
+
document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
|
|
148
|
+
} else {
|
|
149
|
+
providerContext.onClose();
|
|
150
|
+
}
|
|
151
|
+
onOpenChange?.(isOpen);
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
(0, import_internal.subSlot)(slot, "open")
|
|
155
|
+
);
|
|
156
|
+
const stateAttribute = (0, import_octane.useMemo)(
|
|
157
|
+
() => open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed",
|
|
158
|
+
[open],
|
|
159
|
+
(0, import_internal.subSlot)(slot, "state")
|
|
160
|
+
);
|
|
161
|
+
const handleOpen = (0, import_octane.useCallback)(
|
|
162
|
+
() => {
|
|
163
|
+
window.clearTimeout(openTimerRef.current);
|
|
164
|
+
openTimerRef.current = 0;
|
|
165
|
+
wasOpenDelayedRef.current = false;
|
|
166
|
+
setOpen(true);
|
|
167
|
+
},
|
|
168
|
+
[setOpen],
|
|
169
|
+
(0, import_internal.subSlot)(slot, "handleOpen")
|
|
170
|
+
);
|
|
171
|
+
const handleClose = (0, import_octane.useCallback)(
|
|
172
|
+
() => {
|
|
173
|
+
window.clearTimeout(openTimerRef.current);
|
|
174
|
+
openTimerRef.current = 0;
|
|
175
|
+
setOpen(false);
|
|
176
|
+
},
|
|
177
|
+
[setOpen],
|
|
178
|
+
(0, import_internal.subSlot)(slot, "handleClose")
|
|
179
|
+
);
|
|
180
|
+
const handleDelayedOpen = (0, import_octane.useCallback)(
|
|
181
|
+
() => {
|
|
182
|
+
window.clearTimeout(openTimerRef.current);
|
|
183
|
+
openTimerRef.current = window.setTimeout(() => {
|
|
184
|
+
wasOpenDelayedRef.current = true;
|
|
185
|
+
setOpen(true);
|
|
186
|
+
openTimerRef.current = 0;
|
|
187
|
+
}, delayDuration);
|
|
188
|
+
},
|
|
189
|
+
[delayDuration, setOpen],
|
|
190
|
+
(0, import_internal.subSlot)(slot, "delayedOpen")
|
|
191
|
+
);
|
|
192
|
+
(0, import_octane.useEffect)(
|
|
193
|
+
() => {
|
|
194
|
+
return () => {
|
|
195
|
+
if (openTimerRef.current) {
|
|
196
|
+
window.clearTimeout(openTimerRef.current);
|
|
197
|
+
openTimerRef.current = 0;
|
|
198
|
+
}
|
|
199
|
+
};
|
|
200
|
+
},
|
|
201
|
+
[],
|
|
202
|
+
(0, import_internal.subSlot)(slot, "e:timer")
|
|
203
|
+
);
|
|
204
|
+
return (0, import_octane.createElement)(PopperPrimitive.Root, {
|
|
205
|
+
...popperScope,
|
|
206
|
+
children: (0, import_octane.createElement)(TooltipContextProvider, {
|
|
207
|
+
scope: __scopeTooltip,
|
|
208
|
+
contentId,
|
|
209
|
+
open,
|
|
210
|
+
stateAttribute,
|
|
211
|
+
trigger,
|
|
212
|
+
onTriggerChange: setTrigger,
|
|
213
|
+
onTriggerEnter: (0, import_octane.useCallback)(
|
|
214
|
+
() => {
|
|
215
|
+
if (providerContext.isOpenDelayedRef.current) handleDelayedOpen();
|
|
216
|
+
else handleOpen();
|
|
217
|
+
},
|
|
218
|
+
[handleDelayedOpen, handleOpen],
|
|
219
|
+
(0, import_internal.subSlot)(slot, "enter")
|
|
220
|
+
),
|
|
221
|
+
onTriggerLeave: (0, import_octane.useCallback)(
|
|
222
|
+
() => {
|
|
223
|
+
if (disableHoverableContent) {
|
|
224
|
+
handleClose();
|
|
225
|
+
} else {
|
|
226
|
+
window.clearTimeout(openTimerRef.current);
|
|
227
|
+
openTimerRef.current = 0;
|
|
228
|
+
}
|
|
229
|
+
},
|
|
230
|
+
[handleClose, disableHoverableContent],
|
|
231
|
+
(0, import_internal.subSlot)(slot, "leave")
|
|
232
|
+
),
|
|
233
|
+
onOpen: handleOpen,
|
|
234
|
+
onClose: handleClose,
|
|
235
|
+
disableHoverableContent,
|
|
236
|
+
children
|
|
237
|
+
})
|
|
238
|
+
});
|
|
239
|
+
}
|
|
240
|
+
function Trigger(props) {
|
|
241
|
+
const slot = (0, import_internal.S)("Tooltip.Trigger");
|
|
242
|
+
const { __scopeTooltip, ref: forwardedRef, ...triggerProps } = props ?? {};
|
|
243
|
+
const context = useTooltipContext("TooltipTrigger", __scopeTooltip);
|
|
244
|
+
const providerContext = useTooltipProviderContext("TooltipTrigger", __scopeTooltip);
|
|
245
|
+
const popperScope = usePopperScope(__scopeTooltip, (0, import_internal.subSlot)(slot, "popper"));
|
|
246
|
+
const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
|
|
247
|
+
const composedRefs = (0, import_compose_refs.useComposedRefs)(
|
|
248
|
+
forwardedRef,
|
|
249
|
+
ref,
|
|
250
|
+
context.onTriggerChange,
|
|
251
|
+
(0, import_internal.subSlot)(slot, "refs")
|
|
252
|
+
);
|
|
253
|
+
const isPointerDownRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "down"));
|
|
254
|
+
const hasPointerMoveOpenedRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "moved"));
|
|
255
|
+
const handlePointerUp = (0, import_octane.useCallback)(
|
|
256
|
+
() => isPointerDownRef.current = false,
|
|
257
|
+
[],
|
|
258
|
+
(0, import_internal.subSlot)(slot, "up")
|
|
259
|
+
);
|
|
260
|
+
(0, import_octane.useEffect)(
|
|
261
|
+
() => {
|
|
262
|
+
return () => document.removeEventListener("pointerup", handlePointerUp);
|
|
263
|
+
},
|
|
264
|
+
[],
|
|
265
|
+
(0, import_internal.subSlot)(slot, "e:up")
|
|
266
|
+
);
|
|
267
|
+
return (0, import_octane.createElement)(PopperPrimitive.Anchor, {
|
|
268
|
+
asChild: true,
|
|
269
|
+
...popperScope,
|
|
270
|
+
// We purposefully avoid adding `type=button` here because tooltip triggers are
|
|
271
|
+
// also commonly anchors, where the `type` attribute signifies MIME type.
|
|
272
|
+
children: (0, import_octane.createElement)(import_Primitive.Primitive.button, {
|
|
273
|
+
"aria-describedby": context.open ? context.contentId : void 0,
|
|
274
|
+
"data-state": context.stateAttribute,
|
|
275
|
+
...triggerProps,
|
|
276
|
+
ref: composedRefs,
|
|
277
|
+
onPointerMove: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerMove, (event) => {
|
|
278
|
+
if (event.pointerType === "touch") return;
|
|
279
|
+
if (!hasPointerMoveOpenedRef.current && !providerContext.isPointerInTransitRef.current) {
|
|
280
|
+
context.onTriggerEnter();
|
|
281
|
+
hasPointerMoveOpenedRef.current = true;
|
|
282
|
+
}
|
|
283
|
+
}),
|
|
284
|
+
onPointerLeave: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerLeave, () => {
|
|
285
|
+
context.onTriggerLeave();
|
|
286
|
+
hasPointerMoveOpenedRef.current = false;
|
|
287
|
+
}),
|
|
288
|
+
onPointerDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerDown, () => {
|
|
289
|
+
if (context.open) context.onClose();
|
|
290
|
+
isPointerDownRef.current = true;
|
|
291
|
+
document.addEventListener("pointerup", handlePointerUp, { once: true });
|
|
292
|
+
}),
|
|
293
|
+
onFocus: (0, import_compose_event_handlers.composeEventHandlers)(props?.onFocus, () => {
|
|
294
|
+
if (!isPointerDownRef.current) context.onOpen();
|
|
295
|
+
}),
|
|
296
|
+
onBlur: (0, import_compose_event_handlers.composeEventHandlers)(props?.onBlur, context.onClose),
|
|
297
|
+
onClick: (0, import_compose_event_handlers.composeEventHandlers)(props?.onClick, context.onClose)
|
|
298
|
+
})
|
|
299
|
+
});
|
|
300
|
+
}
|
|
301
|
+
const [PortalProvider, usePortalContext] = createTooltipContext(
|
|
302
|
+
"TooltipPortal",
|
|
303
|
+
{ forceMount: void 0 }
|
|
304
|
+
);
|
|
305
|
+
function Portal(props) {
|
|
306
|
+
const { __scopeTooltip, forceMount, children, container } = props ?? {};
|
|
307
|
+
const context = useTooltipContext("TooltipPortal", __scopeTooltip);
|
|
308
|
+
return (0, import_octane.createElement)(PortalProvider, {
|
|
309
|
+
scope: __scopeTooltip,
|
|
310
|
+
forceMount,
|
|
311
|
+
children: (0, import_octane.createElement)(import_Presence.Presence, {
|
|
312
|
+
present: forceMount || context.open,
|
|
313
|
+
children: (0, import_octane.createElement)(import_Portal.Portal, {
|
|
314
|
+
asChild: typeof children !== "function",
|
|
315
|
+
container,
|
|
316
|
+
children
|
|
317
|
+
})
|
|
318
|
+
})
|
|
319
|
+
});
|
|
320
|
+
}
|
|
321
|
+
function Content(props) {
|
|
322
|
+
const portalContext = usePortalContext("TooltipContent", props?.__scopeTooltip);
|
|
323
|
+
const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props ?? {};
|
|
324
|
+
const context = useTooltipContext("TooltipContent", props?.__scopeTooltip);
|
|
325
|
+
return (0, import_octane.createElement)(import_Presence.Presence, {
|
|
326
|
+
present: forceMount || context.open,
|
|
327
|
+
children: context.disableHoverableContent ? (0, import_octane.createElement)(ContentImpl, { side, ...contentProps }) : (0, import_octane.createElement)(ContentHoverable, { side, ...contentProps })
|
|
328
|
+
});
|
|
329
|
+
}
|
|
330
|
+
function ContentHoverable(props) {
|
|
331
|
+
const slot = (0, import_internal.S)("Tooltip.ContentHoverable");
|
|
332
|
+
const { ref: forwardedRef, ...rest } = props;
|
|
333
|
+
const context = useTooltipContext("TooltipContent", props.__scopeTooltip);
|
|
334
|
+
const providerContext = useTooltipProviderContext("TooltipContent", props.__scopeTooltip);
|
|
335
|
+
const ref = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
|
|
336
|
+
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, (0, import_internal.subSlot)(slot, "refs"));
|
|
337
|
+
const [pointerGraceArea, setPointerGraceArea] = (0, import_octane.useState)(
|
|
338
|
+
null,
|
|
339
|
+
(0, import_internal.subSlot)(slot, "grace")
|
|
340
|
+
);
|
|
341
|
+
const { trigger, onClose } = context;
|
|
342
|
+
const content = ref.current;
|
|
343
|
+
const { onPointerInTransitChange } = providerContext;
|
|
344
|
+
const handleRemoveGraceArea = (0, import_octane.useCallback)(
|
|
345
|
+
() => {
|
|
346
|
+
setPointerGraceArea(null);
|
|
347
|
+
onPointerInTransitChange(false);
|
|
348
|
+
},
|
|
349
|
+
[onPointerInTransitChange],
|
|
350
|
+
(0, import_internal.subSlot)(slot, "remove")
|
|
351
|
+
);
|
|
352
|
+
const handleCreateGraceArea = (0, import_octane.useCallback)(
|
|
353
|
+
(event, hoverTarget) => {
|
|
354
|
+
const currentTarget = event.currentTarget;
|
|
355
|
+
const exitPoint = { x: event.clientX, y: event.clientY };
|
|
356
|
+
const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
|
|
357
|
+
const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
|
|
358
|
+
const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
|
|
359
|
+
const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
|
|
360
|
+
setPointerGraceArea(graceArea);
|
|
361
|
+
onPointerInTransitChange(true);
|
|
362
|
+
},
|
|
363
|
+
[onPointerInTransitChange],
|
|
364
|
+
(0, import_internal.subSlot)(slot, "create")
|
|
365
|
+
);
|
|
366
|
+
(0, import_octane.useEffect)(
|
|
367
|
+
() => {
|
|
368
|
+
return () => handleRemoveGraceArea();
|
|
369
|
+
},
|
|
370
|
+
[handleRemoveGraceArea],
|
|
371
|
+
(0, import_internal.subSlot)(slot, "e:cleanup")
|
|
372
|
+
);
|
|
373
|
+
(0, import_octane.useEffect)(
|
|
374
|
+
() => {
|
|
375
|
+
if (trigger && content) {
|
|
376
|
+
const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
|
|
377
|
+
const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
|
|
378
|
+
trigger.addEventListener("pointerleave", handleTriggerLeave);
|
|
379
|
+
content.addEventListener("pointerleave", handleContentLeave);
|
|
380
|
+
return () => {
|
|
381
|
+
trigger.removeEventListener("pointerleave", handleTriggerLeave);
|
|
382
|
+
content.removeEventListener("pointerleave", handleContentLeave);
|
|
383
|
+
};
|
|
384
|
+
}
|
|
385
|
+
},
|
|
386
|
+
[trigger, content, handleCreateGraceArea],
|
|
387
|
+
(0, import_internal.subSlot)(slot, "e:leave")
|
|
388
|
+
);
|
|
389
|
+
(0, import_octane.useEffect)(
|
|
390
|
+
() => {
|
|
391
|
+
if (pointerGraceArea) {
|
|
392
|
+
const handleTrackPointerGrace = (event) => {
|
|
393
|
+
const target = event.target;
|
|
394
|
+
const pointerPosition = { x: event.clientX, y: event.clientY };
|
|
395
|
+
const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
|
|
396
|
+
const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
|
|
397
|
+
if (hasEnteredTarget) {
|
|
398
|
+
handleRemoveGraceArea();
|
|
399
|
+
} else if (isPointerOutsideGraceArea) {
|
|
400
|
+
handleRemoveGraceArea();
|
|
401
|
+
onClose();
|
|
402
|
+
}
|
|
403
|
+
};
|
|
404
|
+
document.addEventListener("pointermove", handleTrackPointerGrace);
|
|
405
|
+
return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
|
|
406
|
+
}
|
|
407
|
+
},
|
|
408
|
+
[trigger, content, pointerGraceArea, onClose, handleRemoveGraceArea],
|
|
409
|
+
(0, import_internal.subSlot)(slot, "e:track")
|
|
410
|
+
);
|
|
411
|
+
return (0, import_octane.createElement)(ContentImpl, {
|
|
412
|
+
...rest,
|
|
413
|
+
__scopeTooltip: props.__scopeTooltip,
|
|
414
|
+
ref: composedRefs
|
|
415
|
+
});
|
|
416
|
+
}
|
|
417
|
+
const [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext("Tooltip", { isInside: false });
|
|
418
|
+
function ContentImpl(props) {
|
|
419
|
+
const slot = (0, import_internal.S)("Tooltip.ContentImpl");
|
|
420
|
+
const {
|
|
421
|
+
__scopeTooltip,
|
|
422
|
+
children,
|
|
423
|
+
"aria-label": ariaLabel,
|
|
424
|
+
onEscapeKeyDown,
|
|
425
|
+
onPointerDownOutside,
|
|
426
|
+
...contentProps
|
|
427
|
+
} = props;
|
|
428
|
+
const context = useTooltipContext("TooltipContent", __scopeTooltip);
|
|
429
|
+
const popperScope = usePopperScope(__scopeTooltip, (0, import_internal.subSlot)(slot, "popper"));
|
|
430
|
+
const { onClose } = context;
|
|
431
|
+
(0, import_octane.useEffect)(
|
|
432
|
+
() => {
|
|
433
|
+
document.addEventListener(TOOLTIP_OPEN, onClose);
|
|
434
|
+
return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
|
|
435
|
+
},
|
|
436
|
+
[onClose],
|
|
437
|
+
(0, import_internal.subSlot)(slot, "e:open")
|
|
438
|
+
);
|
|
439
|
+
(0, import_octane.useEffect)(
|
|
440
|
+
() => {
|
|
441
|
+
if (context.trigger) {
|
|
442
|
+
const handleScroll = (event) => {
|
|
443
|
+
if (event.target instanceof Node && event.target.contains(context.trigger)) {
|
|
444
|
+
onClose();
|
|
445
|
+
}
|
|
446
|
+
};
|
|
447
|
+
window.addEventListener("scroll", handleScroll, { capture: true });
|
|
448
|
+
return () => window.removeEventListener("scroll", handleScroll, { capture: true });
|
|
449
|
+
}
|
|
450
|
+
},
|
|
451
|
+
[context.trigger, onClose],
|
|
452
|
+
(0, import_internal.subSlot)(slot, "e:scroll")
|
|
453
|
+
);
|
|
454
|
+
return (0, import_octane.createElement)(import_DismissableLayer.DismissableLayer, {
|
|
455
|
+
asChild: true,
|
|
456
|
+
disableOutsidePointerEvents: false,
|
|
457
|
+
onEscapeKeyDown,
|
|
458
|
+
onPointerDownOutside,
|
|
459
|
+
onFocusOutside: (event) => event.preventDefault(),
|
|
460
|
+
onDismiss: onClose,
|
|
461
|
+
children: (0, import_octane.createElement)(PopperPrimitive.Content, {
|
|
462
|
+
"data-state": context.stateAttribute,
|
|
463
|
+
...popperScope,
|
|
464
|
+
...contentProps,
|
|
465
|
+
style: {
|
|
466
|
+
...contentProps.style,
|
|
467
|
+
// re-namespace exposed content custom properties
|
|
468
|
+
"--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
469
|
+
"--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
|
|
470
|
+
"--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
|
|
471
|
+
"--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
|
|
472
|
+
"--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
|
|
473
|
+
},
|
|
474
|
+
children: [
|
|
475
|
+
// octane: the user children render through a pass-through host (Radix uses
|
|
476
|
+
// `Slottable` purely for asChild-splitting, which octane handles via props).
|
|
477
|
+
(0, import_octane.createElement)(ChildrenHost, { key: "c", children }),
|
|
478
|
+
(0, import_octane.createElement)(VisuallyHiddenContentContextProvider, {
|
|
479
|
+
key: "vh",
|
|
480
|
+
scope: __scopeTooltip,
|
|
481
|
+
isInside: true,
|
|
482
|
+
children: (0, import_octane.createElement)(VisuallyHiddenPrimitive.Root, {
|
|
483
|
+
id: context.contentId,
|
|
484
|
+
role: "tooltip",
|
|
485
|
+
children: ariaLabel || children
|
|
486
|
+
})
|
|
487
|
+
})
|
|
488
|
+
]
|
|
489
|
+
})
|
|
490
|
+
});
|
|
491
|
+
}
|
|
492
|
+
function Arrow(props) {
|
|
493
|
+
const slot = (0, import_internal.S)("Tooltip.Arrow");
|
|
494
|
+
const { __scopeTooltip, ...arrowProps } = props ?? {};
|
|
495
|
+
const popperScope = usePopperScope(__scopeTooltip, (0, import_internal.subSlot)(slot, "popper"));
|
|
496
|
+
const visuallyHiddenContentContext = useVisuallyHiddenContentContext(
|
|
497
|
+
"TooltipArrow",
|
|
498
|
+
__scopeTooltip
|
|
499
|
+
);
|
|
500
|
+
return visuallyHiddenContentContext.isInside ? null : (0, import_octane.createElement)(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps });
|
|
501
|
+
}
|
|
502
|
+
function ChildrenHost(props) {
|
|
503
|
+
return props.children;
|
|
504
|
+
}
|
|
505
|
+
function getExitSideFromRect(point, rect) {
|
|
506
|
+
const top = Math.abs(rect.top - point.y);
|
|
507
|
+
const bottom = Math.abs(rect.bottom - point.y);
|
|
508
|
+
const right = Math.abs(rect.right - point.x);
|
|
509
|
+
const left = Math.abs(rect.left - point.x);
|
|
510
|
+
switch (Math.min(top, bottom, right, left)) {
|
|
511
|
+
case left:
|
|
512
|
+
return "left";
|
|
513
|
+
case right:
|
|
514
|
+
return "right";
|
|
515
|
+
case top:
|
|
516
|
+
return "top";
|
|
517
|
+
case bottom:
|
|
518
|
+
return "bottom";
|
|
519
|
+
default:
|
|
520
|
+
throw new Error("unreachable");
|
|
521
|
+
}
|
|
522
|
+
}
|
|
523
|
+
function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
|
|
524
|
+
const paddedExitPoints = [];
|
|
525
|
+
switch (exitSide) {
|
|
526
|
+
case "top":
|
|
527
|
+
paddedExitPoints.push(
|
|
528
|
+
{ x: exitPoint.x - padding, y: exitPoint.y + padding },
|
|
529
|
+
{ x: exitPoint.x + padding, y: exitPoint.y + padding }
|
|
530
|
+
);
|
|
531
|
+
break;
|
|
532
|
+
case "bottom":
|
|
533
|
+
paddedExitPoints.push(
|
|
534
|
+
{ x: exitPoint.x - padding, y: exitPoint.y - padding },
|
|
535
|
+
{ x: exitPoint.x + padding, y: exitPoint.y - padding }
|
|
536
|
+
);
|
|
537
|
+
break;
|
|
538
|
+
case "left":
|
|
539
|
+
paddedExitPoints.push(
|
|
540
|
+
{ x: exitPoint.x + padding, y: exitPoint.y - padding },
|
|
541
|
+
{ x: exitPoint.x + padding, y: exitPoint.y + padding }
|
|
542
|
+
);
|
|
543
|
+
break;
|
|
544
|
+
case "right":
|
|
545
|
+
paddedExitPoints.push(
|
|
546
|
+
{ x: exitPoint.x - padding, y: exitPoint.y - padding },
|
|
547
|
+
{ x: exitPoint.x - padding, y: exitPoint.y + padding }
|
|
548
|
+
);
|
|
549
|
+
break;
|
|
550
|
+
}
|
|
551
|
+
return paddedExitPoints;
|
|
552
|
+
}
|
|
553
|
+
function getPointsFromRect(rect) {
|
|
554
|
+
const { top, right, bottom, left } = rect;
|
|
555
|
+
return [
|
|
556
|
+
{ x: left, y: top },
|
|
557
|
+
{ x: right, y: top },
|
|
558
|
+
{ x: right, y: bottom },
|
|
559
|
+
{ x: left, y: bottom }
|
|
560
|
+
];
|
|
561
|
+
}
|
|
562
|
+
function isPointInPolygon(point, polygon) {
|
|
563
|
+
const { x, y } = point;
|
|
564
|
+
let inside = false;
|
|
565
|
+
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
|
566
|
+
const xi = polygon[i].x;
|
|
567
|
+
const yi = polygon[i].y;
|
|
568
|
+
const xj = polygon[j].x;
|
|
569
|
+
const yj = polygon[j].y;
|
|
570
|
+
const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
|
|
571
|
+
if (intersect) inside = !inside;
|
|
572
|
+
}
|
|
573
|
+
return inside;
|
|
574
|
+
}
|
|
575
|
+
function getHull(points) {
|
|
576
|
+
const newPoints = points.slice();
|
|
577
|
+
newPoints.sort((a, b) => {
|
|
578
|
+
if (a.x < b.x) return -1;
|
|
579
|
+
else if (a.x > b.x) return 1;
|
|
580
|
+
else if (a.y < b.y) return -1;
|
|
581
|
+
else if (a.y > b.y) return 1;
|
|
582
|
+
else return 0;
|
|
583
|
+
});
|
|
584
|
+
return getHullPresorted(newPoints);
|
|
585
|
+
}
|
|
586
|
+
function getHullPresorted(points) {
|
|
587
|
+
if (points.length <= 1) return points.slice();
|
|
588
|
+
const upperHull = [];
|
|
589
|
+
for (let i = 0; i < points.length; i++) {
|
|
590
|
+
const p = points[i];
|
|
591
|
+
while (upperHull.length >= 2) {
|
|
592
|
+
const q = upperHull[upperHull.length - 1];
|
|
593
|
+
const r = upperHull[upperHull.length - 2];
|
|
594
|
+
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();
|
|
595
|
+
else break;
|
|
596
|
+
}
|
|
597
|
+
upperHull.push(p);
|
|
598
|
+
}
|
|
599
|
+
upperHull.pop();
|
|
600
|
+
const lowerHull = [];
|
|
601
|
+
for (let i = points.length - 1; i >= 0; i--) {
|
|
602
|
+
const p = points[i];
|
|
603
|
+
while (lowerHull.length >= 2) {
|
|
604
|
+
const q = lowerHull[lowerHull.length - 1];
|
|
605
|
+
const r = lowerHull[lowerHull.length - 2];
|
|
606
|
+
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();
|
|
607
|
+
else break;
|
|
608
|
+
}
|
|
609
|
+
lowerHull.push(p);
|
|
610
|
+
}
|
|
611
|
+
lowerHull.pop();
|
|
612
|
+
if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
|
|
613
|
+
return upperHull;
|
|
614
|
+
}
|
|
615
|
+
return upperHull.concat(lowerHull);
|
|
616
|
+
}
|
|
617
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
618
|
+
0 && (module.exports = {
|
|
619
|
+
Arrow,
|
|
620
|
+
Content,
|
|
621
|
+
Portal,
|
|
622
|
+
Provider,
|
|
623
|
+
Root,
|
|
624
|
+
Tooltip,
|
|
625
|
+
TooltipProvider,
|
|
626
|
+
Trigger,
|
|
627
|
+
createTooltipScope
|
|
628
|
+
});
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var VisuallyHidden_exports = {};
|
|
20
|
+
__export(VisuallyHidden_exports, {
|
|
21
|
+
Root: () => VisuallyHidden,
|
|
22
|
+
VISUALLY_HIDDEN_STYLES: () => VISUALLY_HIDDEN_STYLES,
|
|
23
|
+
VisuallyHidden: () => VisuallyHidden
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(VisuallyHidden_exports);
|
|
26
|
+
var import_octane = require("octane");
|
|
27
|
+
var import_Primitive = require("./Primitive.cjs");
|
|
28
|
+
const VISUALLY_HIDDEN_STYLES = Object.freeze({
|
|
29
|
+
// See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
|
|
30
|
+
position: "absolute",
|
|
31
|
+
border: 0,
|
|
32
|
+
width: 1,
|
|
33
|
+
height: 1,
|
|
34
|
+
padding: 0,
|
|
35
|
+
margin: -1,
|
|
36
|
+
overflow: "hidden",
|
|
37
|
+
clip: "rect(0, 0, 0, 0)",
|
|
38
|
+
whiteSpace: "nowrap",
|
|
39
|
+
wordWrap: "normal"
|
|
40
|
+
});
|
|
41
|
+
function VisuallyHidden(props) {
|
|
42
|
+
return (0, import_octane.createElement)(import_Primitive.Primitive.span, {
|
|
43
|
+
...props,
|
|
44
|
+
style: { ...VISUALLY_HIDDEN_STYLES, ...props?.style }
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
48
|
+
0 && (module.exports = {
|
|
49
|
+
Root,
|
|
50
|
+
VISUALLY_HIDDEN_STYLES,
|
|
51
|
+
VisuallyHidden
|
|
52
|
+
});
|