@openviking/react 0.1.5 → 0.1.7

package/dist/e~0.js

@@ -1,335 +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";
-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,
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const button_Button = /*#__PURE__*/ forwardRef(function({ type = 'default', htmlType = 'button', size = 'default', shape = 'square', icon, iconOnly, loading, long, disabled, className, children, onClick, ...rest }, ref) {
+    const inactive = disabled || loading || true === rest['aria-disabled'] || 'true' === rest['aria-disabled'];
+    const variant = 'default' === type ? 'secondary' : type;
+    const onlyIcon = iconOnly || null != icon && null == children;
+    return /*#__PURE__*/ jsxs("button", {
+        ...rest,
+        ref: ref,
+        type: htmlType,
+        disabled: disabled || loading,
+        "aria-busy": loading || rest['aria-busy'],
         className: [
-            'ov-directory-tour',
+            'ov-button',
+            `ov-button--${variant}`,
+            `ov-button--${size}`,
+            `ov-button--${shape}`,
+            onlyIcon && 'ov-button--icon-only',
+            disabled && 'ov-button--disabled',
+            loading && 'ov-button--loading',
+            long && 'ov-button--long',
             className
         ].filter(Boolean).join(' '),
-        style: {
-            ...style,
-            top: position?.top ?? 0,
-            left: position?.left ?? 0,
-            visibility: position?.visible ? 'visible' : 'hidden'
+        onClick: (event)=>{
+            if (inactive) return void event.preventDefault();
+            onClick?.(event);
         },
         children: [
-            anchor && !unavailable && position?.visible && /*#__PURE__*/ jsx("div", {
-                className: "ov-directory-tour__highlight",
+            loading || null != icon ? /*#__PURE__*/ jsx("span", {
+                className: "ov-button__icon",
                 "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", {
-                        className: "ov-directory-tour__close",
-                        type: "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", {
-                                        type: "button",
-                                        onClick: ()=>retry((value)=>value + 1),
-                                        children: text.retry
-                                    }),
-                                    /*#__PURE__*/ jsx("button", {
-                                        type: "button",
-                                        onClick: ()=>advance(true),
-                                        children: text.skip
-                                    })
-                                ]
-                            }) : /*#__PURE__*/ jsx("button", {
-                                type: "button",
-                                className: "ov-directory-tour__primary",
-                                disabled: locating,
-                                onClick: ()=>advance(false),
-                                children: step.nextLabel ?? (index === steps.length - 1 ? text.done : text.next)
-                            })
-                        ]
-                    })
-                ]
-            })
+                children: loading ? /*#__PURE__*/ jsx("span", {
+                    className: "ov-button__spinner"
+                }) : icon
+            }) : null,
+            children
         ]
-    }), document.body);
-}
-export { DirectoryTour };
+    });
+});
+export { button_Button };