@openviking/react 0.1.6 → 0.1.7

package/dist/ep~0.js

@@ -0,0 +1,345 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useLocale } from "./28~0.js";
+import { resolveLocale } from "./nx~0.js";
+import { button_Button } from "./e~0.js";
+function useTourAnchor(target, locateTarget, timeout, attempt) {
+    const [state, setState] = useState({
+        anchor: null,
+        failed: false
+    });
+    useEffect(()=>{
+        const controller = new AbortController();
+        setState({
+            anchor: null,
+            failed: false
+        });
+        const timer = window.setTimeout(()=>{
+            controller.abort();
+            setState({
+                anchor: null,
+                failed: true
+            });
+        }, timeout);
+        Promise.resolve().then(()=>locateTarget?.(target, controller.signal) ?? null).then((anchor)=>{
+            if (controller.signal.aborted) return;
+            window.clearTimeout(timer);
+            if (anchor?.isConnected) {
+                anchor.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'nearest'
+                });
+                setState({
+                    anchor,
+                    failed: false
+                });
+            } else setState({
+                anchor: null,
+                failed: true
+            });
+        }, ()=>{
+            if (controller.signal.aborted) return;
+            window.clearTimeout(timer);
+            setState({
+                anchor: null,
+                failed: true
+            });
+        });
+        return ()=>{
+            controller.abort();
+            window.clearTimeout(timer);
+        };
+    }, [
+        target,
+        locateTarget,
+        timeout,
+        attempt
+    ]);
+    return state;
+}
+function useTourPosition(anchor, surface, placement) {
+    const [position, setPosition] = useState();
+    useEffect(()=>{
+        if (!surface) return;
+        surface.showPopover?.();
+        const update = ()=>{
+            const a = anchor?.getBoundingClientRect();
+            const box = surface.getBoundingClientRect();
+            const width = window.innerWidth;
+            const height = window.innerHeight;
+            const margin = 8;
+            let left = (width - box.width) / 2;
+            let top = (height - box.height) / 2;
+            const missing = Boolean(anchor && !anchor.isConnected);
+            let visible = !anchor || missing;
+            if (anchor && a && !missing) {
+                let clip = {
+                    left: 0,
+                    top: 0,
+                    right: width,
+                    bottom: height
+                };
+                for(let parent = anchor.parentElement; parent; parent = parent.parentElement){
+                    const css = window.getComputedStyle(parent);
+                    const rect = parent.getBoundingClientRect();
+                    if (/(auto|scroll|hidden|clip)/.test(css.overflowX)) clip = {
+                        ...clip,
+                        left: Math.max(clip.left, rect.left),
+                        right: Math.min(clip.right, rect.right)
+                    };
+                    if (/(auto|scroll|hidden|clip)/.test(css.overflowY)) clip = {
+                        ...clip,
+                        top: Math.max(clip.top, rect.top),
+                        bottom: Math.min(clip.bottom, rect.bottom)
+                    };
+                }
+                visible = anchor.isConnected && a.width > 0 && a.height > 0 && a.top < clip.bottom && a.bottom > clip.top && a.left < clip.right && a.right > clip.left;
+                const right = a.right + 6;
+                const leftSide = a.left - box.width - 6;
+                left = 'right' === placement ? right + box.width <= width - margin || leftSide < margin ? right : leftSide : leftSide >= margin || right + box.width > width - margin ? leftSide : right;
+                top = a.top - 16;
+                const css = window.getComputedStyle(anchor);
+                for(let i = 0; i < css.length; i++){
+                    const name = css[i];
+                    if (name?.startsWith('--ov-ui-')) surface.style.setProperty(name, css.getPropertyValue(name));
+                }
+            }
+            const next = {
+                left: Math.max(margin, Math.min(left, width - box.width - margin)),
+                top: Math.max(margin, Math.min(top, height - box.height - margin)),
+                targetTop: a?.top ?? 0,
+                targetLeft: a?.left ?? 0,
+                targetWidth: a?.width ?? 0,
+                targetHeight: a?.height ?? 0,
+                visible,
+                missing
+            };
+            setPosition((old)=>old && Object.keys(next).every((key)=>old[key] === next[key]) ? old : next);
+        };
+        update();
+        const resize = new ResizeObserver(update);
+        resize.observe(surface);
+        for(let node = anchor; node; node = node.parentElement)resize.observe(node);
+        const mutation = new MutationObserver(update);
+        mutation.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+        window.addEventListener('scroll', update, true);
+        window.addEventListener('resize', update);
+        window.visualViewport?.addEventListener('resize', update);
+        window.visualViewport?.addEventListener('scroll', update);
+        return ()=>{
+            resize.disconnect();
+            mutation.disconnect();
+            window.removeEventListener('scroll', update, true);
+            window.removeEventListener('resize', update);
+            window.visualViewport?.removeEventListener('resize', update);
+            window.visualViewport?.removeEventListener('scroll', update);
+            if (surface.isConnected) surface.hidePopover?.();
+        };
+    }, [
+        anchor,
+        surface,
+        placement
+    ]);
+    return position;
+}
+const messages = {
+    close: 'Close guide',
+    next: 'Next',
+    done: 'Got it',
+    locating: 'Locating directory…',
+    unavailable: 'This directory is unavailable. Retry or skip this step.',
+    retry: 'Retry',
+    skip: 'Skip',
+    progress: (current, total)=>`${current}/${total}`
+};
+const en_US = messages;
+const zh_CN_messages = {
+    close: '关闭引导',
+    next: '下一步',
+    done: '知道了',
+    locating: '正在定位目录…',
+    unavailable: '此目录暂不可用，请重试或跳过这一步。',
+    retry: '重试',
+    skip: '跳过',
+    progress: (current, total)=>`${current}/${total}`
+};
+const zh_CN = zh_CN_messages;
+function DirectoryTour(props) {
+    if (!props.open || 0 === props.steps.length) return null;
+    return /*#__PURE__*/ jsx(TourSession, {
+        ...props
+    });
+}
+function TourSession(props) {
+    const [index, setIndex] = useState(props.defaultStep ?? 0);
+    const skipped = useRef(new Set());
+    const current = props.currentStep ?? index;
+    const step = props.steps[current];
+    if (!step) return null;
+    const advance = (skip)=>{
+        if (skip) skipped.current.add(step.id);
+        if (current === props.steps.length - 1) props.onComplete?.({
+            skippedStepIds: [
+                ...skipped.current
+            ]
+        });
+        else {
+            if (void 0 === props.currentStep) setIndex(current + 1);
+            props.onStepChange?.(current + 1);
+        }
+    };
+    return /*#__PURE__*/ jsx(TourStep, {
+        ...props,
+        step: step,
+        index: current,
+        advance: advance
+    }, step.id);
+}
+function TourStep({ step, index, advance, steps, locateTarget, locateTimeout = 10000, placement = 'right', onClose, labels, locale: localeProp, className, style }) {
+    const locale = useLocale(localeProp);
+    const text = resolveLocale({
+        'en-US': en_US,
+        'zh-CN': zh_CN
+    }, locale, labels);
+    const [attempt, retry] = useState(0);
+    const [surface, setSurface] = useState(null);
+    const { anchor, failed } = useTourAnchor(step.target, locateTarget, locateTimeout, attempt);
+    const position = useTourPosition(anchor, surface, placement);
+    const titleId = useId();
+    const bodyId = useId();
+    useEffect(()=>{
+        const close = (event)=>{
+            if ('Escape' === event.key) {
+                event.preventDefault();
+                onClose?.();
+            }
+        };
+        document.addEventListener('keydown', close);
+        return ()=>document.removeEventListener('keydown', close);
+    }, [
+        onClose
+    ]);
+    useEffect(()=>{
+        const previous = document.activeElement;
+        return ()=>{
+            if (previous instanceof HTMLElement && previous.isConnected) previous.focus({
+                preventScroll: true
+            });
+        };
+    }, []);
+    const visible = position?.visible;
+    useEffect(()=>{
+        if (surface && visible) surface.focus({
+            preventScroll: true
+        });
+    }, [
+        surface,
+        visible
+    ]);
+    if ("u" < typeof document) return null;
+    const unavailable = failed || position?.missing;
+    const locating = !anchor && !failed;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs("div", {
+        ref: setSurface,
+        popover: "manual",
+        role: "dialog",
+        "aria-modal": "false",
+        "aria-labelledby": titleId,
+        "aria-describedby": bodyId,
+        "aria-busy": locating,
+        tabIndex: -1,
+        className: [
+            'ov-directory-tour',
+            className
+        ].filter(Boolean).join(' '),
+        style: {
+            ...style,
+            top: position?.top ?? 0,
+            left: position?.left ?? 0,
+            visibility: position?.visible ? 'visible' : 'hidden'
+        },
+        children: [
+            anchor && !unavailable && position?.visible && /*#__PURE__*/ jsx("div", {
+                className: "ov-directory-tour__highlight",
+                "aria-hidden": "true",
+                style: {
+                    top: position.targetTop,
+                    left: position.targetLeft,
+                    width: position.targetWidth,
+                    height: position.targetHeight
+                }
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "ov-directory-tour__card",
+                children: [
+                    onClose && /*#__PURE__*/ jsx(button_Button, {
+                        size: "mini",
+                        type: "text",
+                        iconOnly: true,
+                        className: "ov-directory-tour__close",
+                        htmlType: "button",
+                        "aria-label": text.close,
+                        onClick: onClose,
+                        children: "\xd7"
+                    }),
+                    !locating && !unavailable && step.illustration && /*#__PURE__*/ jsx("div", {
+                        className: "ov-directory-tour__illustration",
+                        children: step.illustration
+                    }),
+                    /*#__PURE__*/ jsx("h2", {
+                        id: titleId,
+                        className: "ov-directory-tour__title",
+                        children: step.title
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        id: bodyId,
+                        className: "ov-directory-tour__description",
+                        role: unavailable ? 'alert' : void 0,
+                        children: unavailable ? text.unavailable : locating ? text.locating : step.description
+                    }),
+                    /*#__PURE__*/ jsxs("footer", {
+                        className: "ov-directory-tour__actions",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "ov-directory-tour__progress",
+                                "aria-live": "polite",
+                                children: text.progress(index + 1, steps.length)
+                            }),
+                            unavailable ? /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx(button_Button, {
+                                        size: "small",
+                                        type: "default",
+                                        htmlType: "button",
+                                        onClick: ()=>retry((value)=>value + 1),
+                                        children: text.retry
+                                    }),
+                                    /*#__PURE__*/ jsx(button_Button, {
+                                        size: "small",
+                                        type: "default",
+                                        htmlType: "button",
+                                        onClick: ()=>advance(true),
+                                        children: text.skip
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ jsx(button_Button, {
+                                size: "small",
+                                type: "primary",
+                                htmlType: "button",
+                                className: "ov-directory-tour__primary",
+                                disabled: locating,
+                                onClick: ()=>advance(false),
+                                children: step.nextLabel ?? (index === steps.length - 1 ? text.done : text.next)
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    }), document.body);
+}
+export { DirectoryTour };