@openviking/react 0.1.6 → 0.1.8-beta.10.1.g8e5299efeb0a

package/dist/ep~0.js

@@ -0,0 +1,493 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { resolveLocale } from "./nx~0.js";
+import { button_Button } from "./e~0.js";
+import { useLocale } from "./28~0.js";
+function isAnchorGroup(target) {
+    return Array.isArray(target);
+}
+function useTourAnchor(target, locateTarget, timeout, attempt) {
+    const [state, setState] = useState({
+        anchor: null,
+        elements: [],
+        failed: false
+    });
+    useEffect(()=>{
+        const controller = new AbortController();
+        setState({
+            anchor: null,
+            elements: [],
+            failed: false
+        });
+        const timer = window.setTimeout(()=>{
+            controller.abort();
+            setState({
+                anchor: null,
+                elements: [],
+                failed: true
+            });
+        }, timeout);
+        Promise.resolve().then(()=>locateTarget?.(target, controller.signal) ?? null).then((target)=>{
+            if (controller.signal.aborted) return;
+            window.clearTimeout(timer);
+            const elements = target ? isAnchorGroup(target) ? target : [
+                target
+            ] : [];
+            const anchor = elements[0];
+            if (anchor?.isConnected) {
+                anchor.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'nearest'
+                });
+                setState({
+                    anchor,
+                    elements,
+                    failed: false
+                });
+            } else setState({
+                anchor: null,
+                elements: [],
+                failed: true
+            });
+        }, ()=>{
+            if (controller.signal.aborted) return;
+            window.clearTimeout(timer);
+            setState({
+                anchor: null,
+                elements: [],
+                failed: true
+            });
+        });
+        return ()=>{
+            controller.abort();
+            window.clearTimeout(timer);
+        };
+    }, [
+        target,
+        locateTarget,
+        timeout,
+        attempt
+    ]);
+    return state;
+}
+function useTourPosition(anchor, surface, placement, elements) {
+    const [position, setPosition] = useState();
+    useEffect(()=>{
+        if (!surface) return;
+        const frameElement = surface.parentElement;
+        frameElement?.showPopover?.();
+        const update = ()=>{
+            const a = anchor?.getBoundingClientRect();
+            const bounds = elements.filter((node)=>node.isConnected).map((node)=>node.getBoundingClientRect());
+            const group = bounds.length ? {
+                top: Math.min(...bounds.map((r)=>r.top)),
+                left: Math.min(...bounds.map((r)=>r.left)),
+                right: Math.max(...bounds.map((r)=>r.right)),
+                bottom: Math.max(...bounds.map((r)=>r.bottom))
+            } : a;
+            let highlight = group;
+            const box = surface.getBoundingClientRect();
+            const viewport = window.visualViewport;
+            const width = viewport?.width ?? window.innerWidth;
+            const height = viewport?.height ?? window.innerHeight;
+            const x = viewport?.offsetLeft ?? 0;
+            const y = viewport?.offsetTop ?? 0;
+            const margin = 8;
+            let left = x + (width - box.width) / 2;
+            let top = y + (height - box.height) / 2;
+            const missing = Boolean(anchor && !anchor.isConnected);
+            let visible = !anchor || missing;
+            if (anchor && a && !missing) {
+                let clip = {
+                    left: x,
+                    top: y,
+                    right: x + width,
+                    bottom: y + 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)
+                    };
+                }
+                const target = group ?? a;
+                visible = target.right > target.left && target.bottom > target.top && target.top < clip.bottom && target.bottom > clip.top && target.left < clip.right && target.right > clip.left;
+                if (group) highlight = {
+                    top: Math.max(group.top, clip.top),
+                    left: Math.max(group.left, clip.left),
+                    right: Math.min(group.right, clip.right),
+                    bottom: Math.min(group.bottom, clip.bottom)
+                };
+                const right = a.right + 6;
+                const leftSide = a.left - box.width - 6;
+                left = 'right' === placement ? right + box.width <= x + width - margin || leftSide < x + margin ? right : leftSide : leftSide >= x + margin || right + box.width > x + width - margin ? leftSide : right;
+                top = a.top - 16;
+            }
+            const next = {
+                left: Math.max(x + margin, Math.min(left, x + width - box.width - margin)),
+                top: Math.max(y + margin, Math.min(top, y + height - box.height - margin)),
+                maxWidth: Math.max(0, width - 2 * margin),
+                maxHeight: Math.max(0, height - 2 * margin),
+                layoutHeight: window.innerHeight,
+                targetTop: highlight?.top ?? 0,
+                targetLeft: highlight?.left ?? 0,
+                targetWidth: highlight ? Math.max(0, highlight.right - highlight.left) : 0,
+                targetHeight: highlight ? Math.max(0, highlight.bottom - highlight.top) : 0,
+                visible,
+                missing
+            };
+            setPosition((old)=>old && Object.keys(next).every((key)=>old[key] === next[key]) ? old : next);
+        };
+        let frame = 0;
+        const track = ()=>{
+            update();
+            frame = window.requestAnimationFrame(track);
+        };
+        track();
+        const resize = new ResizeObserver(update);
+        resize.observe(surface);
+        for(let node = anchor; node; node = node.parentElement)resize.observe(node);
+        for (const element of elements)resize.observe(element);
+        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 ()=>{
+            window.cancelAnimationFrame(frame);
+            resize.disconnect();
+            mutation.disconnect();
+            window.removeEventListener('scroll', update, true);
+            window.removeEventListener('resize', update);
+            window.visualViewport?.removeEventListener('resize', update);
+            window.visualViewport?.removeEventListener('scroll', update);
+            if (frameElement?.isConnected) frameElement.hidePopover?.();
+        };
+    }, [
+        anchor,
+        surface,
+        placement,
+        elements
+    ]);
+    return position;
+}
+function useTourTheme(anchor, surface) {
+    useEffect(()=>{
+        const host = surface?.parentElement;
+        if (!anchor || !host) return;
+        const copied = new Set();
+        const update = ()=>{
+            const css = window.getComputedStyle(anchor);
+            const next = new Set();
+            for(let index = 0; index < css.length; index++){
+                const name = css[index];
+                if (name?.startsWith('--ov-ui-')) {
+                    next.add(name);
+                    host.style.setProperty(name, css.getPropertyValue(name));
+                }
+            }
+            for (const name of copied)if (!next.has(name)) host.style.removeProperty(name);
+            copied.clear();
+            for (const name of next)copied.add(name);
+        };
+        let ancestors = [];
+        const observeAncestry = ()=>{
+            const next = [];
+            for(let node = anchor; node; node = node.parentElement)next.push(node);
+            if (next.length === ancestors.length && next.every((node, index)=>node === ancestors[index])) return false;
+            ancestors = next;
+            observer.disconnect();
+            for (const node of ancestors)observer.observe(node, {
+                attributes: true,
+                attributeFilter: [
+                    'class',
+                    'style',
+                    'data-theme'
+                ],
+                childList: true
+            });
+            observer.observe(anchor.ownerDocument, {
+                childList: true,
+                subtree: !anchor.isConnected
+            });
+            return true;
+        };
+        const observer = new MutationObserver((records)=>{
+            if (observeAncestry() || records.some(({ type })=>'attributes' === type)) update();
+        });
+        observeAncestry();
+        update();
+        window.addEventListener('resize', update);
+        window.visualViewport?.addEventListener('resize', update);
+        return ()=>{
+            window.removeEventListener('resize', update);
+            window.visualViewport?.removeEventListener('resize', update);
+            observer.disconnect();
+            for (const name of copied)host.style.removeProperty(name);
+        };
+    }, [
+        anchor,
+        surface
+    ]);
+}
+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 TourCard({ step, index, total, locale, labels, onClose, renderContent, titleId, bodyId, locating, unavailable, retry, advance }) {
+    const text = resolveLocale({
+        'en-US': en_US,
+        'zh-CN': zh_CN
+    }, locale, labels);
+    const custom = renderContent && !locating && !unavailable;
+    return /*#__PURE__*/ jsxs("div", {
+        className: custom ? 'ov-directory-tour__card ov-directory-tour__card--custom' : 'ov-directory-tour__card',
+        children: [
+            !custom && 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"
+            }),
+            custom ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("h2", {
+                        id: titleId,
+                        className: "ov-directory-tour__sr-only",
+                        children: step.title
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        id: bodyId,
+                        children: renderContent({
+                            step,
+                            index,
+                            total,
+                            complete: ()=>advance(false),
+                            close: ()=>onClose?.()
+                        })
+                    })
+                ]
+            }) : /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    !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: [
+                            total > 1 && /*#__PURE__*/ jsx("span", {
+                                className: "ov-directory-tour__progress",
+                                "aria-live": "polite",
+                                children: text.progress(index + 1, total)
+                            }),
+                            unavailable ? /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx(button_Button, {
+                                        size: "small",
+                                        type: "default",
+                                        htmlType: "button",
+                                        onClick: retry,
+                                        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 === total - 1 ? text.done : text.next)
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+function DirectoryTour(props) {
+    const [portalRoot, setPortalRoot] = useState(null);
+    useEffect(()=>setPortalRoot(document.body), []);
+    if (!portalRoot || !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, renderContent }) {
+    const locale = useLocale(localeProp);
+    const [attempt, retry] = useState(0);
+    const [surface, setSurface] = useState(null);
+    const { anchor, elements, failed } = useTourAnchor(step.target, locateTarget, locateTimeout, attempt);
+    const position = useTourPosition(anchor, surface, placement, elements);
+    useTourTheme(anchor, surface);
+    const titleId = useId();
+    const bodyId = useId();
+    useEffect(()=>{
+        const close = (event)=>{
+            if ('Escape' === event.key && !event.defaultPrevented && onClose) {
+                event.preventDefault();
+                onClose?.();
+            }
+        };
+        window.addEventListener('keydown', close);
+        return ()=>window.removeEventListener('keydown', close);
+    }, [
+        onClose
+    ]);
+    useEffect(()=>{
+        const previous = document.activeElement;
+        return ()=>{
+            if (previous?.isConnected) previous.focus?.({
+                preventScroll: true
+            });
+        };
+    }, []);
+    const visible = position?.visible;
+    useEffect(()=>{
+        if (surface && visible) surface.focus({
+            preventScroll: true
+        });
+    }, [
+        surface,
+        visible
+    ]);
+    const unavailable = failed || position?.missing;
+    const locating = !anchor && !failed;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+        className: "ov-directory-tour-host",
+        popover: "manual",
+        style: {
+            width: position?.maxWidth,
+            height: position?.layoutHeight,
+            '--ov-ui-directory-tour-viewport-height': position ? `${position.maxHeight}px` : void 0,
+            top: position?.top ?? 0,
+            left: position?.left ?? 0,
+            visibility: position?.visible ? 'visible' : 'hidden'
+        },
+        children: /*#__PURE__*/ jsxs("div", {
+            ref: setSurface,
+            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: {
+                width: step.cardWidth,
+                ...style
+            },
+            children: [
+                anchor && !unavailable && position?.visible && /*#__PURE__*/ jsx("div", {
+                    className: elements.length > 1 ? 'ov-directory-tour__highlight ov-directory-tour__highlight--group' : 'ov-directory-tour__highlight',
+                    "aria-hidden": "true",
+                    style: {
+                        top: position.targetTop,
+                        left: position.targetLeft,
+                        width: position.targetWidth,
+                        height: position.targetHeight
+                    }
+                }),
+                /*#__PURE__*/ jsx(TourCard, {
+                    step: step,
+                    index: index,
+                    total: steps.length,
+                    locale: locale,
+                    labels: labels,
+                    titleId: titleId,
+                    bodyId: bodyId,
+                    locating: locating,
+                    unavailable: Boolean(unavailable),
+                    onClose: onClose,
+                    retry: ()=>retry((value)=>value + 1),
+                    advance: advance,
+                    renderContent: renderContent
+                })
+            ]
+        })
+    }), document.body);
+}
+export { DirectoryTour, en_US, zh_CN };