Grabbed dndbeyond's source code
``` ~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js ```
This commit is contained in:
+190
@@ -0,0 +1,190 @@
|
||||
// Mask.tsx
|
||||
import React from "react";
|
||||
|
||||
// styles.tsx
|
||||
var defaultStyles = {
|
||||
maskWrapper: () => ({
|
||||
opacity: 0.7,
|
||||
left: 0,
|
||||
top: 0,
|
||||
position: "fixed",
|
||||
zIndex: 99999,
|
||||
pointerEvents: "none",
|
||||
color: "#000"
|
||||
}),
|
||||
svgWrapper: ({ windowWidth, windowHeight, wpt, wpl }) => ({
|
||||
width: windowWidth,
|
||||
height: windowHeight,
|
||||
left: Number(wpl),
|
||||
top: Number(wpt),
|
||||
position: "fixed"
|
||||
}),
|
||||
maskArea: ({ x, y, width, height }) => ({
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
fill: "black",
|
||||
rx: 0
|
||||
}),
|
||||
maskRect: ({ windowWidth, windowHeight, maskID }) => ({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: windowWidth,
|
||||
height: windowHeight,
|
||||
fill: "currentColor",
|
||||
mask: `url(#${maskID})`
|
||||
}),
|
||||
clickArea: ({ windowWidth, windowHeight, clipID }) => ({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: windowWidth,
|
||||
height: windowHeight,
|
||||
fill: "currentcolor",
|
||||
pointerEvents: "auto",
|
||||
clipPath: `url(#${clipID})`
|
||||
}),
|
||||
highlightedArea: ({ x, y, width, height }) => ({
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
pointerEvents: "auto",
|
||||
fill: "transparent",
|
||||
display: "none"
|
||||
})
|
||||
};
|
||||
function stylesMatcher(styles) {
|
||||
return (key, state) => {
|
||||
const base = defaultStyles[key](state);
|
||||
const custom = styles[key];
|
||||
return custom ? custom(base, state) : base;
|
||||
};
|
||||
}
|
||||
|
||||
// Mask.tsx
|
||||
import { safe, getWindow, getPadding } from "@reactour/utils";
|
||||
var Mask = ({
|
||||
padding = 10,
|
||||
wrapperPadding = 0,
|
||||
onClick,
|
||||
onClickHighlighted,
|
||||
styles = {},
|
||||
sizes,
|
||||
className,
|
||||
highlightedAreaClassName,
|
||||
maskId,
|
||||
clipId
|
||||
}) => {
|
||||
const maskID = maskId || uniqueId("mask__");
|
||||
const clipID = clipId || uniqueId("clip__");
|
||||
const getStyles = stylesMatcher(styles);
|
||||
const [pt, pr, pb, pl] = getPadding(padding);
|
||||
const [wpt, wpr, wpb, wpl] = getPadding(wrapperPadding);
|
||||
const { w, h } = getWindow();
|
||||
const width = safe((sizes == null ? void 0 : sizes.width) + pl + pr);
|
||||
const height = safe((sizes == null ? void 0 : sizes.height) + pt + pb);
|
||||
const top = safe((sizes == null ? void 0 : sizes.top) - pt - wpt);
|
||||
const left = safe((sizes == null ? void 0 : sizes.left) - pl - wpl);
|
||||
const windowWidth = w - wpl - wpr;
|
||||
const windowHeight = h - wpt - wpb;
|
||||
const maskAreaStyles = getStyles("maskArea", {
|
||||
x: left,
|
||||
y: top,
|
||||
width,
|
||||
height
|
||||
});
|
||||
const highlightedAreaStyles = getStyles("highlightedArea", {
|
||||
x: left,
|
||||
y: top,
|
||||
width,
|
||||
height
|
||||
});
|
||||
return /* @__PURE__ */ React.createElement(
|
||||
"div",
|
||||
{
|
||||
style: getStyles("maskWrapper", {}),
|
||||
onClick,
|
||||
className
|
||||
},
|
||||
/* @__PURE__ */ React.createElement(
|
||||
"svg",
|
||||
{
|
||||
width: windowWidth,
|
||||
height: windowHeight,
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
style: getStyles("svgWrapper", {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
wpt,
|
||||
wpl
|
||||
})
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("mask", { id: maskID }, /* @__PURE__ */ React.createElement(
|
||||
"rect",
|
||||
{
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: windowWidth,
|
||||
height: windowHeight,
|
||||
fill: "white"
|
||||
}
|
||||
), /* @__PURE__ */ React.createElement(
|
||||
"rect",
|
||||
{
|
||||
style: maskAreaStyles,
|
||||
rx: maskAreaStyles.rx ? 1 : void 0
|
||||
}
|
||||
)), /* @__PURE__ */ React.createElement("clipPath", { id: clipID }, /* @__PURE__ */ React.createElement(
|
||||
"polygon",
|
||||
{
|
||||
points: `0 0, 0 ${windowHeight}, ${left} ${windowHeight}, ${left} ${top}, ${left + width} ${top}, ${left + width} ${top + height}, ${left} ${top + height}, ${left} ${windowHeight}, ${windowWidth} ${windowHeight}, ${windowWidth} 0`
|
||||
}
|
||||
))),
|
||||
/* @__PURE__ */ React.createElement(
|
||||
"rect",
|
||||
{
|
||||
style: getStyles("maskRect", {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
maskID
|
||||
})
|
||||
}
|
||||
),
|
||||
/* @__PURE__ */ React.createElement(
|
||||
"rect",
|
||||
{
|
||||
style: getStyles("clickArea", {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
top,
|
||||
left,
|
||||
width,
|
||||
height,
|
||||
clipID
|
||||
})
|
||||
}
|
||||
),
|
||||
/* @__PURE__ */ React.createElement(
|
||||
"rect",
|
||||
{
|
||||
style: highlightedAreaStyles,
|
||||
className: highlightedAreaClassName,
|
||||
onClick: onClickHighlighted,
|
||||
rx: highlightedAreaStyles.rx ? 1 : void 0
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
var Mask_default = Mask;
|
||||
function uniqueId(prefix) {
|
||||
return prefix + Math.random().toString(36).substring(2, 16);
|
||||
}
|
||||
|
||||
// index.tsx
|
||||
var mask_default = Mask_default;
|
||||
export {
|
||||
Mask_default as Mask,
|
||||
mask_default as default
|
||||
};
|
||||
+217
@@ -0,0 +1,217 @@
|
||||
var __defProp = Object.defineProperty;
|
||||
var __defProps = Object.defineProperties;
|
||||
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
||||
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
||||
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
||||
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
||||
var __spreadValues = (a, b) => {
|
||||
for (var prop in b || (b = {}))
|
||||
if (__hasOwnProp.call(b, prop))
|
||||
__defNormalProp(a, prop, b[prop]);
|
||||
if (__getOwnPropSymbols)
|
||||
for (var prop of __getOwnPropSymbols(b)) {
|
||||
if (__propIsEnum.call(b, prop))
|
||||
__defNormalProp(a, prop, b[prop]);
|
||||
}
|
||||
return a;
|
||||
};
|
||||
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
||||
var __objRest = (source, exclude) => {
|
||||
var target = {};
|
||||
for (var prop in source)
|
||||
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
||||
target[prop] = source[prop];
|
||||
if (source != null && __getOwnPropSymbols)
|
||||
for (var prop of __getOwnPropSymbols(source)) {
|
||||
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
||||
target[prop] = source[prop];
|
||||
}
|
||||
return target;
|
||||
};
|
||||
|
||||
// Popover.tsx
|
||||
import React, { useRef } from "react";
|
||||
import {
|
||||
useRect,
|
||||
bestPositionOf,
|
||||
isOutsideX,
|
||||
isOutsideY,
|
||||
getWindow,
|
||||
getPadding
|
||||
} from "@reactour/utils";
|
||||
|
||||
// styles.tsx
|
||||
var defaultStyles = {
|
||||
popover: () => ({
|
||||
position: "fixed",
|
||||
maxWidth: 353,
|
||||
backgroundColor: "#fff",
|
||||
padding: "24px 30px",
|
||||
boxShadow: "0 0.5em 3em rgba(0, 0, 0, 0.3)",
|
||||
color: "inherit",
|
||||
zIndex: 1e5,
|
||||
transition: "transform 0.3s",
|
||||
top: 0,
|
||||
left: 0
|
||||
})
|
||||
};
|
||||
function stylesMatcher(styles) {
|
||||
return (key, state) => {
|
||||
const base = defaultStyles[key](state);
|
||||
const custom = styles[key];
|
||||
return custom ? custom(base, state) : base;
|
||||
};
|
||||
}
|
||||
|
||||
// Popover.tsx
|
||||
var Popover = (_a) => {
|
||||
var _b = _a, {
|
||||
children,
|
||||
position: providedPosition = "bottom",
|
||||
padding = 10,
|
||||
styles = {},
|
||||
sizes,
|
||||
refresher
|
||||
} = _b, props = __objRest(_b, [
|
||||
"children",
|
||||
"position",
|
||||
"padding",
|
||||
"styles",
|
||||
"sizes",
|
||||
"refresher"
|
||||
]);
|
||||
const helperRef = useRef(null);
|
||||
const positionRef = useRef("");
|
||||
const verticalAlignRef = useRef("");
|
||||
const horizontalAlignRef = useRef("");
|
||||
const { w: windowWidth, h: windowHeight } = getWindow();
|
||||
const getStyles = stylesMatcher(styles);
|
||||
const helperRect = useRect(helperRef, refresher);
|
||||
const { width: helperWidth, height: helperHeight } = helperRect;
|
||||
const targetLeft = sizes == null ? void 0 : sizes.left;
|
||||
const targetTop = sizes == null ? void 0 : sizes.top;
|
||||
const targetRight = sizes == null ? void 0 : sizes.right;
|
||||
const targetBottom = sizes == null ? void 0 : sizes.bottom;
|
||||
const position = providedPosition && typeof providedPosition === "function" ? providedPosition(
|
||||
{
|
||||
width: helperWidth,
|
||||
height: helperHeight,
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
top: targetTop,
|
||||
left: targetLeft,
|
||||
right: targetRight,
|
||||
bottom: targetBottom,
|
||||
x: sizes.x,
|
||||
y: sizes.y
|
||||
},
|
||||
helperRect
|
||||
) : providedPosition;
|
||||
const available = {
|
||||
left: targetLeft,
|
||||
right: windowWidth - targetRight,
|
||||
top: targetTop,
|
||||
bottom: windowHeight - targetBottom
|
||||
};
|
||||
const [pt, pr, pb, pl] = getPadding(padding);
|
||||
const couldPositionAt = (position2, isOutsideX2, isOutsideY2) => {
|
||||
switch (position2) {
|
||||
case "top":
|
||||
return available.top > helperHeight + pb;
|
||||
case "right":
|
||||
return isOutsideX2 ? false : available.right > helperWidth + pl;
|
||||
case "bottom":
|
||||
return isOutsideY2 ? false : available.bottom > helperHeight + pt;
|
||||
case "left":
|
||||
return available.left > helperWidth + pr;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const autoPosition = (coords, outX, outY) => {
|
||||
const positionsOrder = bestPositionOf(
|
||||
available,
|
||||
outY ? ["right", "left"] : outX ? ["top", "bottom"] : []
|
||||
);
|
||||
for (let j = 0; j < positionsOrder.length; j++) {
|
||||
if (couldPositionAt(positionsOrder[j], outX, outY)) {
|
||||
positionRef.current = positionsOrder[j];
|
||||
return coords[positionsOrder[j]];
|
||||
}
|
||||
}
|
||||
positionRef.current = "center";
|
||||
return coords.center;
|
||||
};
|
||||
const pos = (helperPosition) => {
|
||||
if (Array.isArray(helperPosition)) {
|
||||
const isOutX = isOutsideX(helperPosition[0], windowWidth);
|
||||
const isOutY = isOutsideY(helperPosition[1], windowHeight);
|
||||
positionRef.current = "custom";
|
||||
return [
|
||||
isOutX ? windowWidth / 2 - helperWidth / 2 : helperPosition[0],
|
||||
isOutY ? windowHeight / 2 - helperHeight / 2 : helperPosition[1]
|
||||
];
|
||||
}
|
||||
const isHelperOutsideX = isOutsideX(targetLeft + helperWidth, windowWidth);
|
||||
const isHelperOutsideY = isOutsideY(
|
||||
targetBottom + helperHeight,
|
||||
windowHeight
|
||||
);
|
||||
const x = isHelperOutsideX ? Math.min(targetLeft, windowWidth - helperWidth) : Math.max(targetLeft, 0);
|
||||
const y = isHelperOutsideY ? helperHeight > available.bottom ? Math.max(targetBottom - helperHeight, 0) : Math.max(targetTop, 0) : targetTop;
|
||||
if (isHelperOutsideY) {
|
||||
if (helperHeight > available.bottom) {
|
||||
verticalAlignRef.current = "bottom";
|
||||
} else {
|
||||
verticalAlignRef.current = "top";
|
||||
}
|
||||
} else {
|
||||
verticalAlignRef.current = "top";
|
||||
}
|
||||
if (isHelperOutsideX) {
|
||||
horizontalAlignRef.current = "left";
|
||||
} else {
|
||||
horizontalAlignRef.current = "right";
|
||||
}
|
||||
const coords = {
|
||||
top: [x - pl, targetTop - helperHeight - pb],
|
||||
right: [targetRight + pl, y - pt],
|
||||
bottom: [x - pl, targetBottom + pt],
|
||||
left: [targetLeft - helperWidth - pr, y - pt],
|
||||
center: [
|
||||
windowWidth / 2 - helperWidth / 2,
|
||||
windowHeight / 2 - helperHeight / 2
|
||||
]
|
||||
};
|
||||
if (helperPosition === "center" || couldPositionAt(helperPosition, isHelperOutsideX, isHelperOutsideY) && !isHelperOutsideX && !isHelperOutsideY) {
|
||||
positionRef.current = helperPosition;
|
||||
return coords[helperPosition];
|
||||
}
|
||||
return autoPosition(coords, isHelperOutsideX, isHelperOutsideY);
|
||||
};
|
||||
const p = pos(position);
|
||||
return /* @__PURE__ */ React.createElement(
|
||||
"div",
|
||||
__spreadValues({
|
||||
className: "reactour__popover",
|
||||
style: __spreadProps(__spreadValues({}, getStyles("popover", {
|
||||
position: positionRef.current,
|
||||
verticalAlign: verticalAlignRef.current,
|
||||
horizontalAlign: horizontalAlignRef.current
|
||||
})), {
|
||||
transform: `translate(${Math.round(p[0])}px, ${Math.round(p[1])}px)`
|
||||
}),
|
||||
ref: helperRef
|
||||
}, props),
|
||||
children
|
||||
);
|
||||
};
|
||||
var Popover_default = Popover;
|
||||
|
||||
// index.tsx
|
||||
var popover_default = Popover_default;
|
||||
export {
|
||||
Popover_default as Popover,
|
||||
popover_default as default
|
||||
};
|
||||
+978
@@ -0,0 +1,978 @@
|
||||
var __defProp = Object.defineProperty;
|
||||
var __defProps = Object.defineProperties;
|
||||
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
||||
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
||||
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
||||
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
||||
var __spreadValues = (a, b) => {
|
||||
for (var prop in b || (b = {}))
|
||||
if (__hasOwnProp.call(b, prop))
|
||||
__defNormalProp(a, prop, b[prop]);
|
||||
if (__getOwnPropSymbols)
|
||||
for (var prop of __getOwnPropSymbols(b)) {
|
||||
if (__propIsEnum.call(b, prop))
|
||||
__defNormalProp(a, prop, b[prop]);
|
||||
}
|
||||
return a;
|
||||
};
|
||||
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
||||
var __objRest = (source, exclude) => {
|
||||
var target = {};
|
||||
for (var prop in source)
|
||||
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
||||
target[prop] = source[prop];
|
||||
if (source != null && __getOwnPropSymbols)
|
||||
for (var prop of __getOwnPropSymbols(source)) {
|
||||
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
||||
target[prop] = source[prop];
|
||||
}
|
||||
return target;
|
||||
};
|
||||
|
||||
// Tour.tsx
|
||||
import React6, { useEffect as useEffect3 } from "react";
|
||||
import { Observables } from "@reactour/utils";
|
||||
import { Mask } from "@reactour/mask";
|
||||
import { Popover } from "@reactour/popover";
|
||||
|
||||
// hooks.tsx
|
||||
import { useEffect, useCallback, useState } from "react";
|
||||
import { inView, smoothScroll, getWindow, getRect } from "@reactour/utils";
|
||||
var initialState = {
|
||||
bottom: 0,
|
||||
height: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
width: 0,
|
||||
windowWidth: 0,
|
||||
windowHeight: 0,
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
function useSizes(step, scrollOptions = {
|
||||
block: "center",
|
||||
behavior: "smooth",
|
||||
inViewThreshold: 0
|
||||
}) {
|
||||
const [transition, setTransition] = useState(false);
|
||||
const [observing, setObserving] = useState(false);
|
||||
const [isHighlightingObserved, setIsHighlightingObserved] = useState(false);
|
||||
const [refresher, setRefresher] = useState(null);
|
||||
const [dimensions, setDimensions] = useState(initialState);
|
||||
const target = (step == null ? void 0 : step.selector) instanceof Element ? step == null ? void 0 : step.selector : document.querySelector(step == null ? void 0 : step.selector);
|
||||
const handleResize = useCallback(() => {
|
||||
const _a = getHighlightedRect(
|
||||
target,
|
||||
step == null ? void 0 : step.highlightedSelectors,
|
||||
step == null ? void 0 : step.bypassElem
|
||||
), { hasHighligtedElems } = _a, newDimensions = __objRest(_a, ["hasHighligtedElems"]);
|
||||
if (Object.entries(dimensions).some(
|
||||
([key, value]) => newDimensions[key] !== value
|
||||
)) {
|
||||
setDimensions(newDimensions);
|
||||
}
|
||||
}, [target, step == null ? void 0 : step.highlightedSelectors, dimensions]);
|
||||
useEffect(() => {
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, [target, step == null ? void 0 : step.highlightedSelectors, refresher]);
|
||||
useEffect(() => {
|
||||
const isInView = inView(__spreadProps(__spreadValues({}, dimensions), {
|
||||
threshold: scrollOptions.inViewThreshold
|
||||
}));
|
||||
if (!isInView && target) {
|
||||
setTransition(true);
|
||||
smoothScroll(target, scrollOptions).then(() => {
|
||||
if (!observing)
|
||||
setRefresher(Date.now());
|
||||
}).finally(() => {
|
||||
setTransition(false);
|
||||
});
|
||||
}
|
||||
}, [dimensions]);
|
||||
const observableRefresher = useCallback(() => {
|
||||
setObserving(true);
|
||||
const _a = getHighlightedRect(
|
||||
target,
|
||||
step == null ? void 0 : step.highlightedSelectors,
|
||||
step == null ? void 0 : step.bypassElem
|
||||
), { hasHighligtedElems } = _a, dimesions = __objRest(_a, ["hasHighligtedElems"]);
|
||||
setIsHighlightingObserved(hasHighligtedElems);
|
||||
setDimensions(dimesions);
|
||||
setObserving(false);
|
||||
}, [target, step == null ? void 0 : step.highlightedSelectors, dimensions]);
|
||||
return {
|
||||
sizes: dimensions,
|
||||
transition,
|
||||
target,
|
||||
observableRefresher,
|
||||
isHighlightingObserved
|
||||
};
|
||||
}
|
||||
function getHighlightedRect(node, highlightedSelectors = [], bypassElem = true) {
|
||||
let hasHighligtedElems = false;
|
||||
const { w: windowWidth, h: windowHeight } = getWindow();
|
||||
if (!highlightedSelectors) {
|
||||
return __spreadProps(__spreadValues({}, getRect(node)), {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
hasHighligtedElems: false
|
||||
});
|
||||
}
|
||||
let attrs = getRect(node);
|
||||
let altAttrs = {
|
||||
bottom: 0,
|
||||
height: 0,
|
||||
left: windowWidth,
|
||||
right: 0,
|
||||
top: windowHeight,
|
||||
width: 0
|
||||
};
|
||||
for (const selector of highlightedSelectors) {
|
||||
const element = document.querySelector(selector);
|
||||
if (!element || element.style.display === "none" || element.style.visibility === "hidden") {
|
||||
continue;
|
||||
}
|
||||
const rect = getRect(element);
|
||||
hasHighligtedElems = true;
|
||||
if (bypassElem || !node) {
|
||||
if (rect.top < altAttrs.top) {
|
||||
altAttrs.top = rect.top;
|
||||
}
|
||||
if (rect.right > altAttrs.right) {
|
||||
altAttrs.right = rect.right;
|
||||
}
|
||||
if (rect.bottom > altAttrs.bottom) {
|
||||
altAttrs.bottom = rect.bottom;
|
||||
}
|
||||
if (rect.left < altAttrs.left) {
|
||||
altAttrs.left = rect.left;
|
||||
}
|
||||
altAttrs.width = altAttrs.right - altAttrs.left;
|
||||
altAttrs.height = altAttrs.bottom - altAttrs.top;
|
||||
} else {
|
||||
if (rect.top < attrs.top) {
|
||||
attrs.top = rect.top;
|
||||
}
|
||||
if (rect.right > attrs.right) {
|
||||
attrs.right = rect.right;
|
||||
}
|
||||
if (rect.bottom > attrs.bottom) {
|
||||
attrs.bottom = rect.bottom;
|
||||
}
|
||||
if (rect.left < attrs.left) {
|
||||
attrs.left = rect.left;
|
||||
}
|
||||
attrs.width = attrs.right - attrs.left;
|
||||
attrs.height = attrs.bottom - attrs.top;
|
||||
}
|
||||
}
|
||||
const bypassable = bypassElem || !node ? altAttrs.width > 0 && altAttrs.height > 0 : false;
|
||||
return {
|
||||
left: (bypassable ? altAttrs : attrs).left,
|
||||
top: (bypassable ? altAttrs : attrs).top,
|
||||
right: (bypassable ? altAttrs : attrs).right,
|
||||
bottom: (bypassable ? altAttrs : attrs).bottom,
|
||||
width: (bypassable ? altAttrs : attrs).width,
|
||||
height: (bypassable ? altAttrs : attrs).height,
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
hasHighligtedElems,
|
||||
x: attrs.x,
|
||||
y: attrs.y
|
||||
};
|
||||
}
|
||||
|
||||
// Keyboard.tsx
|
||||
import { useEffect as useEffect2 } from "react";
|
||||
var Keyboard = ({
|
||||
disableKeyboardNavigation,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
setIsOpen,
|
||||
stepsLength,
|
||||
disable,
|
||||
rtl,
|
||||
clickProps,
|
||||
keyboardHandler
|
||||
}) => {
|
||||
function keyDownHandler(e) {
|
||||
e.stopPropagation();
|
||||
if (disableKeyboardNavigation === true || disable) {
|
||||
return;
|
||||
}
|
||||
let isEscDisabled, isRightDisabled, isLeftDisabled;
|
||||
if (disableKeyboardNavigation) {
|
||||
isEscDisabled = disableKeyboardNavigation.includes("esc");
|
||||
isRightDisabled = disableKeyboardNavigation.includes("right");
|
||||
isLeftDisabled = disableKeyboardNavigation.includes("left");
|
||||
}
|
||||
function next() {
|
||||
setCurrentStep(Math.min(currentStep + 1, stepsLength - 1));
|
||||
}
|
||||
function prev() {
|
||||
setCurrentStep(Math.max(currentStep - 1, 0));
|
||||
}
|
||||
if (keyboardHandler && typeof keyboardHandler === "function") {
|
||||
keyboardHandler(e, clickProps, {
|
||||
isEscDisabled,
|
||||
isRightDisabled,
|
||||
isLeftDisabled
|
||||
});
|
||||
} else {
|
||||
if (e.keyCode === 27 && !isEscDisabled) {
|
||||
e.preventDefault();
|
||||
setIsOpen(false);
|
||||
}
|
||||
if (e.keyCode === 39 && !isRightDisabled) {
|
||||
e.preventDefault();
|
||||
if (rtl) {
|
||||
prev();
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
}
|
||||
if (e.keyCode === 37 && !isLeftDisabled) {
|
||||
e.preventDefault();
|
||||
if (rtl) {
|
||||
next();
|
||||
} else {
|
||||
prev();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
useEffect2(() => {
|
||||
window.addEventListener("keydown", keyDownHandler, false);
|
||||
return () => {
|
||||
window.removeEventListener("keydown", keyDownHandler);
|
||||
};
|
||||
}, [disable, setCurrentStep, currentStep]);
|
||||
return null;
|
||||
};
|
||||
var Keyboard_default = Keyboard;
|
||||
|
||||
// components/PopoverContent.tsx
|
||||
import React5 from "react";
|
||||
|
||||
// components/Badge.tsx
|
||||
import React2 from "react";
|
||||
|
||||
// styles.tsx
|
||||
var defaultStyles = {
|
||||
badge: () => ({
|
||||
position: "absolute",
|
||||
fontFamily: "monospace",
|
||||
background: "var(--reactour-accent,#007aff)",
|
||||
height: "1.875em",
|
||||
lineHeight: 2,
|
||||
paddingLeft: "0.8125em",
|
||||
paddingRight: "0.8125em",
|
||||
fontSize: "1em",
|
||||
borderRadius: "1.625em",
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
boxShadow: "0 0.25em 0.5em rgba(0, 0, 0, 0.3)",
|
||||
top: "-0.8125em",
|
||||
left: "-0.8125em"
|
||||
}),
|
||||
controls: () => ({
|
||||
display: "flex",
|
||||
marginTop: 24,
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between"
|
||||
}),
|
||||
navigation: () => ({
|
||||
counterReset: "dot",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
flexWrap: "wrap"
|
||||
}),
|
||||
button: ({ disabled }) => ({
|
||||
display: "block",
|
||||
padding: 0,
|
||||
border: 0,
|
||||
background: "none",
|
||||
cursor: disabled ? "not-allowed" : "pointer"
|
||||
}),
|
||||
arrow: ({ disabled }) => ({
|
||||
color: disabled ? "#caccce" : "#646464",
|
||||
width: 16,
|
||||
height: 12,
|
||||
flex: "0 0 16px"
|
||||
// '&:hover': {
|
||||
// color: disabled ? '#caccce' : '#000',
|
||||
// },
|
||||
}),
|
||||
dot: ({ current, disabled, showNumber }) => ({
|
||||
counterIncrement: "dot",
|
||||
width: 8,
|
||||
height: 8,
|
||||
border: current ? "0" : "1px solid #caccce",
|
||||
borderRadius: "100%",
|
||||
padding: 0,
|
||||
display: "block",
|
||||
margin: 4,
|
||||
transition: "opacity 0.3s, transform 0.3s",
|
||||
cursor: disabled ? "not-allowed" : "pointer",
|
||||
transform: `scale(${current ? 1.25 : 1})`,
|
||||
color: current ? "var(--reactour-accent, #007aff)" : "#caccce",
|
||||
background: current ? "var(--reactour-accent, #007aff)" : "none"
|
||||
// '&:before': {
|
||||
// content: 'counter(dot)',
|
||||
// position: 'absolute',
|
||||
// bottom: 'calc(100% + 0.25em)',
|
||||
// left: '50%',
|
||||
// opacity: 0,
|
||||
// transform: 'translate(-50%, 1em)',
|
||||
// transition: '0.3s',
|
||||
// display: showNumber ? 'block' : 'none',
|
||||
// },
|
||||
// '&:hover': {
|
||||
// backgroundColor: 'currentColor',
|
||||
// '&:before': {
|
||||
// opacity: 0.5,
|
||||
// transform: 'translate(-50%, -2px)',
|
||||
// },
|
||||
// },
|
||||
}),
|
||||
close: ({ disabled }) => ({
|
||||
position: "absolute",
|
||||
top: 22,
|
||||
right: 22,
|
||||
width: 9,
|
||||
height: 9,
|
||||
"--rt-close-btn": disabled ? "#caccce" : "#5e5e5e",
|
||||
"--rt-close-btn-disabled": disabled ? "#caccce" : "#000"
|
||||
}),
|
||||
svg: () => ({
|
||||
display: "block"
|
||||
})
|
||||
};
|
||||
function stylesMatcher(styles) {
|
||||
return (key, state) => {
|
||||
const base = defaultStyles[key](state);
|
||||
const custom = styles[key];
|
||||
return custom ? custom(base, state) : base;
|
||||
};
|
||||
}
|
||||
|
||||
// components/Badge.tsx
|
||||
var Badge = ({
|
||||
styles = {},
|
||||
children
|
||||
}) => {
|
||||
const getStyles = stylesMatcher(styles);
|
||||
return /* @__PURE__ */ React2.createElement("span", { style: getStyles("badge", {}) }, children);
|
||||
};
|
||||
var Badge_default = Badge;
|
||||
|
||||
// components/Close.tsx
|
||||
import React3 from "react";
|
||||
var Close = (_a) => {
|
||||
var _b = _a, {
|
||||
styles = {},
|
||||
onClick,
|
||||
disabled
|
||||
} = _b, props = __objRest(_b, [
|
||||
"styles",
|
||||
"onClick",
|
||||
"disabled"
|
||||
]);
|
||||
const getStyles = stylesMatcher(styles);
|
||||
return /* @__PURE__ */ React3.createElement(
|
||||
"button",
|
||||
__spreadValues({
|
||||
className: "reactour__close-button",
|
||||
style: __spreadValues(__spreadValues({}, getStyles("button", {})), getStyles("close", { disabled })),
|
||||
onClick
|
||||
}, props),
|
||||
/* @__PURE__ */ React3.createElement(
|
||||
"svg",
|
||||
{
|
||||
viewBox: "0 0 9.1 9.1",
|
||||
"aria-hidden": true,
|
||||
role: "presentation",
|
||||
style: __spreadValues({}, getStyles("svg", {}))
|
||||
},
|
||||
/* @__PURE__ */ React3.createElement(
|
||||
"path",
|
||||
{
|
||||
fill: "currentColor",
|
||||
d: "M5.9 4.5l2.8-2.8c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L4.5 3.1 1.7.3C1.3-.1.7-.1.3.3c-.4.4-.4 1 0 1.4l2.8 2.8L.3 7.4c-.4.4-.4 1 0 1.4.2.2.4.3.7.3s.5-.1.7-.3L4.5 6l2.8 2.8c.3.2.5.3.8.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L5.9 4.5z"
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
var Close_default = Close;
|
||||
|
||||
// components/Content.tsx
|
||||
var Content = ({
|
||||
content,
|
||||
setCurrentStep,
|
||||
transition,
|
||||
isHighlightingObserved,
|
||||
currentStep,
|
||||
setIsOpen
|
||||
}) => {
|
||||
return typeof content === "function" ? content({
|
||||
setCurrentStep,
|
||||
transition,
|
||||
isHighlightingObserved,
|
||||
currentStep,
|
||||
setIsOpen
|
||||
}) : content;
|
||||
};
|
||||
var Content_default = Content;
|
||||
|
||||
// components/Navigation.tsx
|
||||
import React4 from "react";
|
||||
var Navigation = ({
|
||||
styles = {},
|
||||
steps,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
setIsOpen,
|
||||
nextButton,
|
||||
prevButton,
|
||||
disableDots,
|
||||
hideDots,
|
||||
hideButtons,
|
||||
disableAll,
|
||||
rtl,
|
||||
Arrow = DefaultArrow
|
||||
}) => {
|
||||
const stepsLength = steps.length;
|
||||
const getStyles = stylesMatcher(styles);
|
||||
const Button = ({
|
||||
onClick,
|
||||
kind = "next",
|
||||
children,
|
||||
hideArrow
|
||||
}) => {
|
||||
function clickHandler() {
|
||||
if (!disableAll) {
|
||||
if (onClick && typeof onClick === "function") {
|
||||
onClick();
|
||||
} else {
|
||||
if (kind === "next") {
|
||||
setCurrentStep(Math.min(currentStep + 1, stepsLength - 1));
|
||||
} else {
|
||||
setCurrentStep(Math.max(currentStep - 1, 0));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return /* @__PURE__ */ React4.createElement(
|
||||
"button",
|
||||
{
|
||||
style: getStyles("button", {
|
||||
kind,
|
||||
disabled: disableAll ? disableAll : kind === "next" ? stepsLength - 1 === currentStep : currentStep === 0
|
||||
}),
|
||||
onClick: clickHandler,
|
||||
"aria-label": `Go to ${kind} step`
|
||||
},
|
||||
!hideArrow ? /* @__PURE__ */ React4.createElement(
|
||||
Arrow,
|
||||
{
|
||||
styles,
|
||||
inverted: rtl ? kind === "prev" : kind === "next",
|
||||
disabled: disableAll ? disableAll : kind === "next" ? stepsLength - 1 === currentStep : currentStep === 0
|
||||
}
|
||||
) : null,
|
||||
children
|
||||
);
|
||||
};
|
||||
return /* @__PURE__ */ React4.createElement("div", { style: getStyles("controls", {}), dir: rtl ? "rtl" : "ltr" }, !hideButtons ? prevButton && typeof prevButton === "function" ? prevButton({
|
||||
Button,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
stepsLength,
|
||||
setIsOpen,
|
||||
steps
|
||||
}) : /* @__PURE__ */ React4.createElement(Button, { kind: "prev" }) : null, !hideDots ? /* @__PURE__ */ React4.createElement("div", { style: getStyles("navigation", {}) }, Array.from({ length: stepsLength }, (_, i) => i).map((index) => {
|
||||
var _a;
|
||||
return /* @__PURE__ */ React4.createElement(
|
||||
"button",
|
||||
{
|
||||
style: getStyles("dot", {
|
||||
current: index === currentStep,
|
||||
disabled: disableDots || disableAll
|
||||
}),
|
||||
onClick: () => {
|
||||
if (!disableDots && !disableAll)
|
||||
setCurrentStep(index);
|
||||
},
|
||||
key: `navigation_dot_${index}`,
|
||||
"aria-label": ((_a = steps[index]) == null ? void 0 : _a.navDotAriaLabel) || `Go to step ${index + 1}`
|
||||
}
|
||||
);
|
||||
})) : null, !hideButtons ? nextButton && typeof nextButton === "function" ? nextButton({
|
||||
Button,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
stepsLength,
|
||||
setIsOpen,
|
||||
steps
|
||||
}) : /* @__PURE__ */ React4.createElement(Button, null) : null);
|
||||
};
|
||||
var Navigation_default = Navigation;
|
||||
var DefaultArrow = ({
|
||||
styles = {},
|
||||
inverted = false,
|
||||
disabled
|
||||
}) => {
|
||||
const getStyles = stylesMatcher(styles);
|
||||
return /* @__PURE__ */ React4.createElement(
|
||||
"svg",
|
||||
{
|
||||
viewBox: "0 0 18.4 14.4",
|
||||
style: getStyles("arrow", { inverted, disabled })
|
||||
},
|
||||
/* @__PURE__ */ React4.createElement(
|
||||
"path",
|
||||
{
|
||||
d: inverted ? "M17 7.2H1M10.8 1L17 7.2l-6.2 6.2" : "M1.4 7.2h16M7.6 1L1.4 7.2l6.2 6.2",
|
||||
fill: "none",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: "2",
|
||||
strokeLinecap: "round",
|
||||
strokeMiterlimit: "10"
|
||||
}
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
// components/index.tsx
|
||||
var components = {
|
||||
Badge: Badge_default,
|
||||
Close: Close_default,
|
||||
Content: Content_default,
|
||||
Navigation: Navigation_default,
|
||||
Arrow: DefaultArrow
|
||||
};
|
||||
var defaultComponents = (comps) => __spreadValues(__spreadValues({}, components), comps);
|
||||
|
||||
// components/PopoverContent.tsx
|
||||
var PopoverContent = ({
|
||||
styles,
|
||||
components: components2 = {},
|
||||
badgeContent,
|
||||
accessibilityOptions,
|
||||
disabledActions,
|
||||
onClickClose,
|
||||
steps,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
transition,
|
||||
isHighlightingObserved,
|
||||
setIsOpen,
|
||||
nextButton,
|
||||
prevButton,
|
||||
disableDotsNavigation,
|
||||
rtl,
|
||||
showPrevNextButtons = true,
|
||||
showCloseButton = true,
|
||||
showNavigation = true,
|
||||
showBadge = true,
|
||||
showDots = true,
|
||||
meta,
|
||||
setMeta,
|
||||
setSteps
|
||||
}) => {
|
||||
const step = steps[currentStep];
|
||||
const { Badge: Badge2, Close: Close2, Content: Content2, Navigation: Navigation2, Arrow } = defaultComponents(components2);
|
||||
const badge = badgeContent && typeof badgeContent === "function" ? badgeContent({
|
||||
currentStep,
|
||||
totalSteps: steps.length,
|
||||
transition
|
||||
}) : currentStep + 1;
|
||||
function closeClickHandler() {
|
||||
if (!disabledActions) {
|
||||
if (onClickClose && typeof onClickClose === "function") {
|
||||
onClickClose({
|
||||
setCurrentStep,
|
||||
setIsOpen,
|
||||
currentStep,
|
||||
steps,
|
||||
meta,
|
||||
setMeta,
|
||||
setSteps
|
||||
});
|
||||
} else {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
return /* @__PURE__ */ React5.createElement(React5.Fragment, null, showBadge ? /* @__PURE__ */ React5.createElement(Badge2, { styles }, badge) : null, showCloseButton ? /* @__PURE__ */ React5.createElement(
|
||||
Close2,
|
||||
{
|
||||
styles,
|
||||
"aria-label": accessibilityOptions == null ? void 0 : accessibilityOptions.closeButtonAriaLabel,
|
||||
disabled: disabledActions,
|
||||
onClick: closeClickHandler
|
||||
}
|
||||
) : null, /* @__PURE__ */ React5.createElement(
|
||||
Content2,
|
||||
{
|
||||
content: step == null ? void 0 : step.content,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
transition,
|
||||
isHighlightingObserved,
|
||||
setIsOpen
|
||||
}
|
||||
), showNavigation ? /* @__PURE__ */ React5.createElement(
|
||||
Navigation2,
|
||||
{
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
setIsOpen,
|
||||
steps,
|
||||
styles,
|
||||
"aria-hidden": !(accessibilityOptions == null ? void 0 : accessibilityOptions.showNavigationScreenReaders),
|
||||
nextButton,
|
||||
prevButton,
|
||||
disableDots: disableDotsNavigation,
|
||||
hideButtons: !showPrevNextButtons,
|
||||
hideDots: !showDots,
|
||||
disableAll: disabledActions,
|
||||
rtl,
|
||||
Arrow
|
||||
}
|
||||
) : null);
|
||||
};
|
||||
var PopoverContent_default = PopoverContent;
|
||||
|
||||
// Tour.tsx
|
||||
var Tour = (_a) => {
|
||||
var _b = _a, {
|
||||
currentStep,
|
||||
setCurrentStep,
|
||||
setIsOpen,
|
||||
steps = [],
|
||||
setSteps,
|
||||
styles: globalStyles = {},
|
||||
scrollSmooth,
|
||||
afterOpen,
|
||||
beforeClose,
|
||||
padding = 10,
|
||||
position,
|
||||
onClickMask,
|
||||
onClickHighlighted,
|
||||
keyboardHandler,
|
||||
className = "reactour__popover",
|
||||
maskClassName = "reactour__mask",
|
||||
highlightedMaskClassName,
|
||||
clipId,
|
||||
maskId,
|
||||
disableInteraction,
|
||||
disableKeyboardNavigation: disableKeyboardNavigation,
|
||||
inViewThreshold,
|
||||
disabledActions,
|
||||
setDisabledActions,
|
||||
disableWhenSelectorFalsy,
|
||||
rtl,
|
||||
accessibilityOptions = {
|
||||
closeButtonAriaLabel: "Close Tour",
|
||||
showNavigationScreenReaders: true
|
||||
},
|
||||
ContentComponent,
|
||||
Wrapper,
|
||||
meta,
|
||||
setMeta,
|
||||
onTransition = () => {
|
||||
return "center";
|
||||
}
|
||||
} = _b, popoverProps = __objRest(_b, [
|
||||
"currentStep",
|
||||
"setCurrentStep",
|
||||
"setIsOpen",
|
||||
"steps",
|
||||
"setSteps",
|
||||
"styles",
|
||||
"scrollSmooth",
|
||||
"afterOpen",
|
||||
"beforeClose",
|
||||
"padding",
|
||||
"position",
|
||||
"onClickMask",
|
||||
"onClickHighlighted",
|
||||
"keyboardHandler",
|
||||
"className",
|
||||
"maskClassName",
|
||||
"highlightedMaskClassName",
|
||||
"clipId",
|
||||
"maskId",
|
||||
"disableInteraction",
|
||||
// disableFocusLock,
|
||||
"disableKeyboardNavigation",
|
||||
"inViewThreshold",
|
||||
"disabledActions",
|
||||
"setDisabledActions",
|
||||
"disableWhenSelectorFalsy",
|
||||
"rtl",
|
||||
"accessibilityOptions",
|
||||
"ContentComponent",
|
||||
"Wrapper",
|
||||
"meta",
|
||||
"setMeta",
|
||||
"onTransition"
|
||||
]);
|
||||
var _a2;
|
||||
const step = steps[currentStep];
|
||||
const styles = __spreadValues(__spreadValues({}, globalStyles), step == null ? void 0 : step.styles);
|
||||
const {
|
||||
sizes,
|
||||
transition,
|
||||
observableRefresher,
|
||||
isHighlightingObserved,
|
||||
target
|
||||
} = useSizes(step, {
|
||||
block: "center",
|
||||
behavior: scrollSmooth ? "smooth" : "auto",
|
||||
inViewThreshold
|
||||
});
|
||||
useEffect3(() => {
|
||||
if (afterOpen && typeof afterOpen === "function") {
|
||||
afterOpen(target);
|
||||
}
|
||||
return () => {
|
||||
if (beforeClose && typeof beforeClose === "function") {
|
||||
beforeClose(target);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
const { maskPadding, popoverPadding, wrapperPadding } = getPadding(
|
||||
(_a2 = step == null ? void 0 : step.padding) != null ? _a2 : padding
|
||||
);
|
||||
const clickProps = {
|
||||
setCurrentStep,
|
||||
setIsOpen,
|
||||
currentStep,
|
||||
setSteps,
|
||||
steps,
|
||||
setMeta,
|
||||
meta
|
||||
};
|
||||
function maskClickHandler() {
|
||||
if (!disabledActions) {
|
||||
if (onClickMask && typeof onClickMask === "function") {
|
||||
onClickMask(clickProps);
|
||||
} else {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
const doDisableInteraction = typeof (step == null ? void 0 : step.stepInteraction) === "boolean" ? !(step == null ? void 0 : step.stepInteraction) : disableInteraction ? typeof disableInteraction === "boolean" ? disableInteraction : disableInteraction(clickProps) : false;
|
||||
useEffect3(() => {
|
||||
if ((step == null ? void 0 : step.action) && typeof (step == null ? void 0 : step.action) === "function") {
|
||||
step == null ? void 0 : step.action(target);
|
||||
}
|
||||
if ((step == null ? void 0 : step.disableActions) !== void 0) {
|
||||
setDisabledActions(step == null ? void 0 : step.disableActions);
|
||||
}
|
||||
return () => {
|
||||
if ((step == null ? void 0 : step.actionAfter) && typeof (step == null ? void 0 : step.actionAfter) === "function") {
|
||||
step == null ? void 0 : step.actionAfter(target);
|
||||
}
|
||||
};
|
||||
}, [step]);
|
||||
const popoverPosition = transition ? onTransition : (step == null ? void 0 : step.position) ? step == null ? void 0 : step.position : position;
|
||||
const TourWrapper = Wrapper ? Wrapper : React6.Fragment;
|
||||
return step ? /* @__PURE__ */ React6.createElement(TourWrapper, null, /* @__PURE__ */ React6.createElement(
|
||||
Observables,
|
||||
{
|
||||
mutationObservables: step == null ? void 0 : step.mutationObservables,
|
||||
resizeObservables: step == null ? void 0 : step.resizeObservables,
|
||||
refresh: observableRefresher
|
||||
}
|
||||
), /* @__PURE__ */ React6.createElement(
|
||||
Keyboard_default,
|
||||
{
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
setIsOpen,
|
||||
stepsLength: steps.length,
|
||||
disableKeyboardNavigation,
|
||||
disable: disabledActions,
|
||||
rtl,
|
||||
clickProps,
|
||||
keyboardHandler
|
||||
}
|
||||
), (!disableWhenSelectorFalsy || target) && /* @__PURE__ */ React6.createElement(
|
||||
Mask,
|
||||
{
|
||||
sizes: transition ? initialState2 : sizes,
|
||||
onClick: maskClickHandler,
|
||||
styles: __spreadValues({
|
||||
highlightedArea: (base) => __spreadProps(__spreadValues({}, base), {
|
||||
display: doDisableInteraction ? "block" : "none"
|
||||
})
|
||||
}, styles),
|
||||
padding: transition ? 0 : maskPadding,
|
||||
highlightedAreaClassName: highlightedMaskClassName,
|
||||
className: maskClassName,
|
||||
onClickHighlighted: (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (onClickHighlighted)
|
||||
onClickHighlighted(e, clickProps);
|
||||
},
|
||||
wrapperPadding,
|
||||
clipId,
|
||||
maskId
|
||||
}
|
||||
), (!disableWhenSelectorFalsy || target) && /* @__PURE__ */ React6.createElement(
|
||||
Popover,
|
||||
{
|
||||
sizes,
|
||||
styles,
|
||||
position: popoverPosition,
|
||||
padding: popoverPadding,
|
||||
"aria-labelledby": accessibilityOptions == null ? void 0 : accessibilityOptions.ariaLabelledBy,
|
||||
className,
|
||||
refresher: currentStep
|
||||
},
|
||||
ContentComponent ? /* @__PURE__ */ React6.createElement(
|
||||
ContentComponent,
|
||||
__spreadValues({
|
||||
styles,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
setIsOpen,
|
||||
steps,
|
||||
accessibilityOptions,
|
||||
disabledActions,
|
||||
transition,
|
||||
isHighlightingObserved,
|
||||
rtl
|
||||
}, popoverProps)
|
||||
) : /* @__PURE__ */ React6.createElement(
|
||||
PopoverContent_default,
|
||||
__spreadValues({
|
||||
styles,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
setIsOpen,
|
||||
steps,
|
||||
setSteps,
|
||||
accessibilityOptions,
|
||||
disabledActions,
|
||||
transition,
|
||||
isHighlightingObserved,
|
||||
rtl,
|
||||
meta,
|
||||
setMeta
|
||||
}, popoverProps)
|
||||
)
|
||||
)) : null;
|
||||
};
|
||||
var Tour_default = Tour;
|
||||
function getPadding(padding) {
|
||||
if (typeof padding === "object" && padding !== null) {
|
||||
return {
|
||||
maskPadding: padding.mask,
|
||||
popoverPadding: padding.popover,
|
||||
wrapperPadding: padding.wrapper
|
||||
};
|
||||
}
|
||||
return {
|
||||
maskPadding: padding,
|
||||
popoverPadding: padding,
|
||||
wrapperPadding: 0
|
||||
};
|
||||
}
|
||||
var initialState2 = {
|
||||
bottom: 0,
|
||||
height: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
width: 0,
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
// Context.tsx
|
||||
import React7, { useState as useState2, useContext } from "react";
|
||||
var defaultState = {
|
||||
isOpen: false,
|
||||
setIsOpen: () => false,
|
||||
currentStep: 0,
|
||||
setCurrentStep: () => 0,
|
||||
steps: [],
|
||||
setSteps: () => [],
|
||||
setMeta: () => "",
|
||||
disabledActions: false,
|
||||
setDisabledActions: () => false,
|
||||
components: {}
|
||||
};
|
||||
var TourContext = React7.createContext(defaultState);
|
||||
var TourProvider = (_a) => {
|
||||
var _b = _a, {
|
||||
children,
|
||||
defaultOpen = false,
|
||||
startAt = 0,
|
||||
steps: defaultSteps,
|
||||
setCurrentStep: customSetCurrentStep,
|
||||
currentStep: customCurrentStep
|
||||
} = _b, props = __objRest(_b, [
|
||||
"children",
|
||||
"defaultOpen",
|
||||
"startAt",
|
||||
"steps",
|
||||
"setCurrentStep",
|
||||
"currentStep"
|
||||
]);
|
||||
const [isOpen, setIsOpen] = useState2(defaultOpen);
|
||||
const [currentStep, setCurrentStep] = useState2(startAt);
|
||||
const [steps, setSteps] = useState2(defaultSteps);
|
||||
const [meta, setMeta] = useState2("");
|
||||
const [disabledActions, setDisabledActions] = useState2(false);
|
||||
const value = __spreadValues({
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
currentStep: customCurrentStep || currentStep,
|
||||
setCurrentStep: customSetCurrentStep && typeof customSetCurrentStep === "function" ? customSetCurrentStep : setCurrentStep,
|
||||
steps,
|
||||
setSteps,
|
||||
disabledActions,
|
||||
setDisabledActions,
|
||||
meta,
|
||||
setMeta
|
||||
}, props);
|
||||
return /* @__PURE__ */ React7.createElement(TourContext.Provider, { value }, children, isOpen ? /* @__PURE__ */ React7.createElement(Tour_default, __spreadValues({}, value)) : null);
|
||||
};
|
||||
var Context_default = TourContext;
|
||||
function useTour() {
|
||||
return useContext(TourContext);
|
||||
}
|
||||
|
||||
// withTour.tsx
|
||||
import React8 from "react";
|
||||
function withTour(WrappedComponent) {
|
||||
const ComponentWithTour = (props) => {
|
||||
const tourProps = useTour();
|
||||
return /* @__PURE__ */ React8.createElement(WrappedComponent, __spreadValues(__spreadValues({}, props), tourProps));
|
||||
};
|
||||
return ComponentWithTour;
|
||||
}
|
||||
|
||||
// index.tsx
|
||||
var tour_default = Tour_default;
|
||||
export {
|
||||
Tour_default as Tour,
|
||||
Context_default as TourContext,
|
||||
TourProvider,
|
||||
components,
|
||||
tour_default as default,
|
||||
useTour,
|
||||
withTour
|
||||
};
|
||||
+270
@@ -0,0 +1,270 @@
|
||||
// Observables.tsx
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import useMutationObserver from "@rooks/use-mutation-observer";
|
||||
import ResizeObserver from "resize-observer-polyfill";
|
||||
var Observables = ({
|
||||
mutationObservables,
|
||||
resizeObservables,
|
||||
refresh
|
||||
}) => {
|
||||
const [mutationsCounter, setMutationsCounter] = useState(0);
|
||||
const ref = useRef(document.documentElement || document.body);
|
||||
function refreshHighlightedRegionIfObservable(nodes) {
|
||||
const posibleNodes = Array.from(nodes);
|
||||
for (const node of posibleNodes) {
|
||||
if (mutationObservables) {
|
||||
if (!node.attributes) {
|
||||
continue;
|
||||
}
|
||||
const found = mutationObservables.find(
|
||||
(observable) => node.matches(observable)
|
||||
);
|
||||
if (found) {
|
||||
refresh(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function incrementMutationsCounterIfObservable(nodes) {
|
||||
const posibleNodes = Array.from(nodes);
|
||||
for (const node of posibleNodes) {
|
||||
if (resizeObservables) {
|
||||
if (!node.attributes) {
|
||||
continue;
|
||||
}
|
||||
const found = resizeObservables.find(
|
||||
(observable) => node.matches(observable)
|
||||
);
|
||||
if (found)
|
||||
setMutationsCounter(mutationsCounter + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
useMutationObserver(
|
||||
ref,
|
||||
(mutationList) => {
|
||||
for (const mutation of mutationList) {
|
||||
if (mutation.addedNodes.length !== 0) {
|
||||
refreshHighlightedRegionIfObservable(mutation.addedNodes);
|
||||
incrementMutationsCounterIfObservable(mutation.addedNodes);
|
||||
}
|
||||
if (mutation.removedNodes.length !== 0) {
|
||||
refreshHighlightedRegionIfObservable(mutation.removedNodes);
|
||||
incrementMutationsCounterIfObservable(mutation.removedNodes);
|
||||
}
|
||||
}
|
||||
},
|
||||
{ childList: true, subtree: true }
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!resizeObservables) {
|
||||
return;
|
||||
}
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
refresh();
|
||||
});
|
||||
for (const observable of resizeObservables) {
|
||||
const element = document.querySelector(observable);
|
||||
if (element) {
|
||||
resizeObserver.observe(element);
|
||||
}
|
||||
}
|
||||
return () => {
|
||||
resizeObserver.disconnect();
|
||||
};
|
||||
}, [resizeObservables, mutationsCounter]);
|
||||
return null;
|
||||
};
|
||||
var Observables_default = Observables;
|
||||
|
||||
// useRect.tsx
|
||||
import { useEffect as useEffect2, useCallback, useState as useState2 } from "react";
|
||||
function getRect(element) {
|
||||
let rect = initialState;
|
||||
if (element) {
|
||||
const domRect = element.getBoundingClientRect();
|
||||
rect = domRect;
|
||||
}
|
||||
return rect;
|
||||
}
|
||||
function useRect(ref, refresher) {
|
||||
const [dimensions, setDimensions] = useState2(initialState);
|
||||
const handleResize = useCallback(() => {
|
||||
if (!(ref == null ? void 0 : ref.current))
|
||||
return;
|
||||
setDimensions(getRect(ref == null ? void 0 : ref.current));
|
||||
}, [ref == null ? void 0 : ref.current]);
|
||||
useEffect2(() => {
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, [ref == null ? void 0 : ref.current, refresher]);
|
||||
return dimensions;
|
||||
}
|
||||
function useElemRect(elem, refresher) {
|
||||
const [dimensions, setDimensions] = useState2(initialState);
|
||||
const handleResize = useCallback(() => {
|
||||
if (!elem)
|
||||
return;
|
||||
setDimensions(getRect(elem));
|
||||
}, [elem]);
|
||||
useEffect2(() => {
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, [elem, refresher]);
|
||||
return dimensions;
|
||||
}
|
||||
var initialState = {
|
||||
bottom: 0,
|
||||
height: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
width: 0,
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
// smoothScroll.tsx
|
||||
function smoothScroll(elem, options) {
|
||||
return new Promise((resolve) => {
|
||||
if (!(elem instanceof Element)) {
|
||||
throw new TypeError("Argument 1 must be an Element");
|
||||
}
|
||||
let same = 0;
|
||||
let lastPos = null;
|
||||
const scrollOptions = Object.assign({ behavior: "smooth" }, options);
|
||||
elem.scrollIntoView(scrollOptions);
|
||||
requestAnimationFrame(check);
|
||||
function check() {
|
||||
const newPos = elem == null ? void 0 : elem.getBoundingClientRect().top;
|
||||
if (newPos === lastPos) {
|
||||
if (same++ > 2) {
|
||||
return resolve(null);
|
||||
}
|
||||
} else {
|
||||
same = 0;
|
||||
lastPos = newPos;
|
||||
}
|
||||
requestAnimationFrame(check);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// useIntersectionObserver.tsx
|
||||
import { useEffect as useEffect3, useState as useState3 } from "react";
|
||||
function useIntersectionObserver(elementRef, {
|
||||
threshold = 0,
|
||||
root = null,
|
||||
rootMargin = "0%",
|
||||
freezeOnceVisible = false
|
||||
}) {
|
||||
const [entry, setEntry] = useState3();
|
||||
const frozen = (entry == null ? void 0 : entry.isIntersecting) && freezeOnceVisible;
|
||||
const updateEntry = ([entry2]) => {
|
||||
setEntry(entry2);
|
||||
};
|
||||
useEffect3(() => {
|
||||
const node = elementRef == null ? void 0 : elementRef.current;
|
||||
const hasIOSupport = !!window.IntersectionObserver;
|
||||
if (!hasIOSupport || frozen || !node)
|
||||
return;
|
||||
const observerParams = { threshold, root, rootMargin };
|
||||
const observer = new IntersectionObserver(updateEntry, observerParams);
|
||||
observer.observe(node);
|
||||
return () => observer.disconnect();
|
||||
}, [elementRef, JSON.stringify(threshold), root, rootMargin, frozen]);
|
||||
return entry;
|
||||
}
|
||||
|
||||
// helpers.tsx
|
||||
function safe(sum) {
|
||||
return sum < 0 ? 0 : sum;
|
||||
}
|
||||
function getInViewThreshold(threshold) {
|
||||
if (typeof threshold === "object" && threshold !== null) {
|
||||
return {
|
||||
thresholdX: threshold.x || 0,
|
||||
thresholdY: threshold.y || 0
|
||||
};
|
||||
}
|
||||
return {
|
||||
thresholdX: threshold || 0,
|
||||
thresholdY: threshold || 0
|
||||
};
|
||||
}
|
||||
function getWindow() {
|
||||
const w = Math.max(
|
||||
document.documentElement.clientWidth,
|
||||
window.innerWidth || 0
|
||||
);
|
||||
const h = Math.max(
|
||||
document.documentElement.clientHeight,
|
||||
window.innerHeight || 0
|
||||
);
|
||||
return { w, h };
|
||||
}
|
||||
function inView({
|
||||
top,
|
||||
right,
|
||||
bottom,
|
||||
left,
|
||||
threshold
|
||||
}) {
|
||||
const { w: windowWidth, h: windowHeight } = getWindow();
|
||||
const { thresholdX, thresholdY } = getInViewThreshold(threshold);
|
||||
return top < 0 && bottom - top > windowHeight ? true : top >= 0 + thresholdY && left >= 0 + thresholdX && bottom <= windowHeight - thresholdY && right <= windowWidth - thresholdX;
|
||||
}
|
||||
var isHoriz = (pos) => /(left|right)/.test(pos);
|
||||
var isOutsideX = (val, windowWidth) => {
|
||||
return val > windowWidth;
|
||||
};
|
||||
var isOutsideY = (val, windowHeight) => {
|
||||
return val > windowHeight;
|
||||
};
|
||||
function bestPositionOf(positions, filters = []) {
|
||||
const compareFn = (a, b) => filters.includes(a) ? 1 : filters.includes(b) ? -1 : 0;
|
||||
return Object.keys(positions).map((p) => {
|
||||
return {
|
||||
position: p,
|
||||
value: positions[p]
|
||||
};
|
||||
}).sort((a, b) => b.value - a.value).sort((a, b) => compareFn(a.position, b.position)).filter((p) => p.value > 0).map((p) => p.position);
|
||||
}
|
||||
var defaultPadding = 10;
|
||||
function getPadding(padding = defaultPadding) {
|
||||
if (Array.isArray(padding)) {
|
||||
if (padding.length === 1) {
|
||||
return [padding[0], padding[0], padding[0], padding[0]];
|
||||
}
|
||||
if (padding.length === 2) {
|
||||
return [padding[1], padding[0], padding[1], padding[0]];
|
||||
}
|
||||
if (padding.length === 3) {
|
||||
return [padding[0], padding[1], padding[2], padding[1]];
|
||||
}
|
||||
if (padding.length > 3) {
|
||||
return [padding[0], padding[1], padding[2], padding[3]];
|
||||
}
|
||||
return [defaultPadding, defaultPadding];
|
||||
}
|
||||
return [padding, padding, padding, padding];
|
||||
}
|
||||
export {
|
||||
Observables_default as Observables,
|
||||
bestPositionOf,
|
||||
getInViewThreshold,
|
||||
getPadding,
|
||||
getRect,
|
||||
getWindow,
|
||||
inView,
|
||||
isHoriz,
|
||||
isOutsideX,
|
||||
isOutsideY,
|
||||
safe,
|
||||
smoothScroll,
|
||||
useElemRect,
|
||||
useIntersectionObserver,
|
||||
useRect
|
||||
};
|
||||
Reference in New Issue
Block a user