@hub-kit/core 0.3.4 → 0.3.5
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.
|
@@ -24,7 +24,6 @@ export function TourOverlay() {
|
|
|
24
24
|
window.addEventListener("resize", readViewport);
|
|
25
25
|
return () => window.removeEventListener("resize", readViewport);
|
|
26
26
|
}, []);
|
|
27
|
-
const cardRef = useRef(null);
|
|
28
27
|
const skipMissingStep = useRef(() => { });
|
|
29
28
|
skipMissingStep.current = tour ? tour.next : () => { };
|
|
30
29
|
useEffect(() => {
|
|
@@ -75,13 +74,6 @@ export function TourOverlay() {
|
|
|
75
74
|
stopMeasuring?.();
|
|
76
75
|
};
|
|
77
76
|
}, [target]);
|
|
78
|
-
useEffect(() => {
|
|
79
|
-
const wrapper = cardRef.current?.closest("[data-radix-popper-content-wrapper]");
|
|
80
|
-
if (wrapper) {
|
|
81
|
-
wrapper.style.transition = `transform ${MOVE_DURATION} ease`;
|
|
82
|
-
wrapper.style.zIndex = CARD_LAYER;
|
|
83
|
-
}
|
|
84
|
-
}, [target]);
|
|
85
77
|
useEffect(() => {
|
|
86
78
|
if (!tour?.isOpen) {
|
|
87
79
|
return;
|
|
@@ -131,7 +123,7 @@ export function TourOverlay() {
|
|
|
131
123
|
"0 0 0 3px var(--tour-ring-gap, var(--background))",
|
|
132
124
|
"0 0 0 5px var(--tour-accent, var(--primary))",
|
|
133
125
|
].join(", "),
|
|
134
|
-
} }), _jsxs(Popover, { open: true, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsx("div", { className: "absolute", style: { top: rect.top, left: rect.left, width: rect.width, height: rect.height } }) }), _jsxs(PopoverContent, { ref:
|
|
126
|
+
} }), _jsxs(Popover, { open: true, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsx("div", { className: "absolute", style: { top: rect.top, left: rect.left, width: rect.width, height: rect.height } }) }), _jsxs(PopoverContent, { ref: liftCardAboveBackdrop, side: sideForScreen(step.placement, rect, viewport), align: "center", sideOffset: 12, arrowPadding: 16, collisionPadding: 16, className: "w-[min(var(--tour-card-width,22rem),calc(100vw-2rem))] rounded-2xl border-0 px-4 pt-4 pb-2.5 shadow-xl sm:px-5 sm:pt-5 sm:pb-3.5", onOpenAutoFocus: (event) => event.preventDefault(), onEscapeKeyDown: (event) => event.preventDefault(), onPointerDownOutside: (event) => event.preventDefault(), onInteractOutside: (event) => event.preventDefault(), "aria-label": tour.labels.cardTitle, children: [_jsx(TourCard, { step: step, stepIndex: tour.stepIndex, stepCount: tour.stepCount, labels: tour.labels, onNext: tour.next, onSkip: tour.skip }), _jsx(PopoverArrow, { width: 18, height: 9, style: { fill: "var(--popover)" } })] })] })] }));
|
|
135
127
|
}
|
|
136
128
|
function sideForScreen(placement, rect, viewport) {
|
|
137
129
|
if (viewport.width === 0) {
|
|
@@ -182,3 +174,11 @@ function revealTallTarget(element) {
|
|
|
182
174
|
const delta = element.getBoundingClientRect().top - containerTop - gapAbove;
|
|
183
175
|
container.scrollBy({ top: delta, behavior: "smooth" });
|
|
184
176
|
}
|
|
177
|
+
function liftCardAboveBackdrop(node) {
|
|
178
|
+
const wrapper = node?.closest("[data-radix-popper-content-wrapper]");
|
|
179
|
+
if (!wrapper) {
|
|
180
|
+
return;
|
|
181
|
+
}
|
|
182
|
+
wrapper.style.zIndex = CARD_LAYER;
|
|
183
|
+
wrapper.style.transition = `transform ${MOVE_DURATION} ease`;
|
|
184
|
+
}
|