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

package/dist/ep~0.js

@@ -1,30 +1,40 @@
 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";
+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((anchor)=>{
+        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',
@@ -32,10 +42,12 @@ function useTourAnchor(target, locateTarget, timeout, attempt) {
                 });
                 setState({
                     anchor,
+                    elements,
                     failed: false
                 });
             } else setState({
                 anchor: null,
+                elements: [],
                 failed: true
             });
         }, ()=>{
@@ -43,6 +55,7 @@ function useTourAnchor(target, locateTarget, timeout, attempt) {
             window.clearTimeout(timer);
             setState({
                 anchor: null,
+                elements: [],
                 failed: true
             });
         });
@@ -58,27 +71,39 @@ function useTourAnchor(target, locateTarget, timeout, attempt) {
     ]);
     return state;
 }
-function useTourPosition(anchor, surface, placement) {
+function useTourPosition(anchor, surface, placement, elements) {
     const [position, setPosition] = useState();
     useEffect(()=>{
         if (!surface) return;
-        surface.showPopover?.();
+        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 width = window.innerWidth;
-            const height = window.innerHeight;
+            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 = (width - box.width) / 2;
-            let top = (height - box.height) / 2;
+            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: 0,
-                    top: 0,
-                    right: width,
-                    bottom: height
+                    left: x,
+                    top: y,
+                    right: x + width,
+                    bottom: y + height
                 };
                 for(let parent = anchor.parentElement; parent; parent = parent.parentElement){
                     const css = window.getComputedStyle(parent);
@@ -94,33 +119,44 @@ function useTourPosition(anchor, surface, placement) {
                         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 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 <= width - margin || leftSide < margin ? right : leftSide : leftSide >= margin || right + box.width > width - margin ? leftSide : right;
+                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 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,
+                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);
         };
-        update();
+        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,
@@ -131,21 +167,82 @@ function useTourPosition(anchor, surface, placement) {
         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 (surface.isConnected) surface.hidePopover?.();
+            if (frameElement?.isConnected) frameElement.hidePopover?.();
         };
     }, [
         anchor,
         surface,
-        placement
+        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',
@@ -168,8 +265,105 @@ const zh_CN_messages = {
     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) {
-    if (!props.open || 0 === props.steps.length) return null;
+    const [portalRoot, setPortalRoot] = useState(null);
+    useEffect(()=>setPortalRoot(document.body), []);
+    if (!portalRoot || !props.open || 0 === props.steps.length) return null;
     return /*#__PURE__*/ jsx(TourSession, {
         ...props
     });
@@ -199,34 +393,31 @@ function TourSession(props) {
         advance: advance
     }, step.id);
 }
-function TourStep({ step, index, advance, steps, locateTarget, locateTimeout = 10000, placement = 'right', onClose, labels, locale: localeProp, className, style }) {
+function TourStep({ step, index, advance, steps, locateTarget, locateTimeout = 10000, placement = 'right', onClose, labels, locale: localeProp, className, style, renderContent }) {
     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 { 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) {
+            if ('Escape' === event.key && !event.defaultPrevented && onClose) {
                 event.preventDefault();
                 onClose?.();
             }
         };
-        document.addEventListener('keydown', close);
-        return ()=>document.removeEventListener('keydown', close);
+        window.addEventListener('keydown', close);
+        return ()=>window.removeEventListener('keydown', close);
     }, [
         onClose
     ]);
     useEffect(()=>{
         const previous = document.activeElement;
         return ()=>{
-            if (previous instanceof HTMLElement && previous.isConnected) previous.focus({
+            if (previous?.isConnected) previous.focus?.({
                 preventScroll: true
             });
         };
@@ -240,106 +431,63 @@ function TourStep({ step, index, advance, steps, locateTarget, locateTimeout = 1
         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,
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+        className: "ov-directory-tour-host",
         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,
+            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: [
-            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)
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
+        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 };
+export { DirectoryTour, en_US, zh_CN };