@openviking/react 0.1.3 → 0.1.4

package/dist/r~0.js

@@ -0,0 +1,152 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, useCallback, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useOverlayPosition } from "./o~0.js";
+const DEFAULT_LABELS = {
+    close: 'Close'
+};
+function useMergedRef(ref, target) {
+    const merged = useCallback((node)=>{
+        target.current = node;
+        if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    }, [
+        ref,
+        target
+    ]);
+    return merged;
+}
+function Tooltip({ children, content, placement = 'top', trigger = 'hover', delay = 300, disabled = false, className, style, onOpenChange, labels }) {
+    const text = {
+        ...DEFAULT_LABELS,
+        ...labels
+    };
+    const [open, setOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const timerRef = useRef(void 0);
+    const [surfaceNode, setSurfaceNode] = useState(null);
+    const id = useId();
+    const position = useOverlayPosition(open, triggerRef, surfaceNode, placement);
+    const change = useCallback((next)=>{
+        setOpen(next);
+        onOpenChange?.(next);
+    }, [
+        onOpenChange
+    ]);
+    const clearTimer = useCallback(()=>{
+        if (void 0 !== timerRef.current) {
+            window.clearTimeout(timerRef.current);
+            timerRef.current = void 0;
+        }
+    }, []);
+    useEffect(()=>clearTimer, [
+        clearTimer
+    ]);
+    useEffect(()=>{
+        if (disabled) {
+            clearTimer();
+            setOpen(false);
+        }
+    }, [
+        disabled,
+        clearTimer
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        const onPointerDown = (event)=>{
+            const target = event.target;
+            if (surfaceNode?.contains(target) || triggerRef.current?.contains(target)) return;
+            change(false);
+        };
+        const onKeyDown = (event)=>{
+            if ('Escape' === event.key) {
+                clearTimer();
+                change(false);
+            }
+        };
+        if ('click' === trigger) document.addEventListener('mousedown', onPointerDown);
+        document.addEventListener('keydown', onKeyDown);
+        return ()=>{
+            if ('click' === trigger) document.removeEventListener('mousedown', onPointerDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [
+        change,
+        clearTimer,
+        open,
+        surfaceNode,
+        trigger
+    ]);
+    const show = ()=>{
+        if (disabled) return;
+        if ('click' === trigger) return void change(!open);
+        clearTimer();
+        timerRef.current = window.setTimeout(()=>{
+            change(true);
+            timerRef.current = void 0;
+        }, delay);
+    };
+    const hide = ()=>{
+        if ('click' === trigger) return;
+        clearTimer();
+        timerRef.current = window.setTimeout(()=>{
+            change(false);
+            timerRef.current = void 0;
+        }, 120);
+    };
+    const child = children;
+    const childProps = child.props;
+    const childRef = child.ref;
+    const mergedRef = useMergedRef(childRef, triggerRef);
+    const triggerElement = /*#__PURE__*/ cloneElement(child, {
+        ref: mergedRef,
+        'aria-describedby': open && 'hover' === trigger ? id : void 0,
+        'aria-expanded': 'click' === trigger ? open : childProps['aria-expanded'],
+        onMouseEnter: (event)=>{
+            childProps.onMouseEnter?.(event);
+            if ('hover' === trigger) show();
+        },
+        onMouseLeave: (event)=>{
+            childProps.onMouseLeave?.(event);
+            if ('hover' === trigger) hide();
+        },
+        onFocus: (event)=>{
+            childProps.onFocus?.(event);
+            if ('hover' === trigger) show();
+        },
+        onBlur: (event)=>{
+            childProps.onBlur?.(event);
+            hide();
+        },
+        onClick: (event)=>{
+            childProps.onClick?.(event);
+            if ('click' === trigger) show();
+        }
+    });
+    const surface = open ? /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+        ref: setSurfaceNode,
+        id: id,
+        role: 'hover' === trigger ? 'tooltip' : 'dialog',
+        "aria-label": 'click' === trigger ? text.close : void 0,
+        className: [
+            'ov-tooltip',
+            className
+        ].filter(Boolean).join(' '),
+        "data-placement": position.placement,
+        style: {
+            top: position.top,
+            left: position.left,
+            ...style
+        },
+        onMouseEnter: 'hover' === trigger ? clearTimer : void 0,
+        onMouseLeave: 'hover' === trigger ? hide : void 0,
+        children: content
+    }), document.body) : null;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            triggerElement,
+            surface
+        ]
+    });
+}
+export { Tooltip };

package/dist/shared/components/drawer/drawer.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode, RefObject } from 'react';
+export interface DrawerProps {
+    id: string;
+    open: boolean;
+    title: string;
+    closeLabel: string;
+    triggerRef: RefObject<HTMLElement | null>;
+    children: ReactNode;
+    className?: string;
+    lang?: string;
+    onClose: () => void;
+}
+export declare function Drawer({ id, open, title, closeLabel, triggerRef, children, className, lang, onClose, }: DrawerProps): import("react").ReactPortal | null;

package/dist/shared/components/drawer/index.d.ts

@@ -0,0 +1 @@
+export * from './drawer.js';

package/dist/shared/components/overlay/use-overlay-position.d.ts

@@ -18,7 +18,7 @@ export interface OverlayPosition {
 export declare function resolvePosition(trigger: DOMRect, surface: {
     width: number;
     height: number;
-}, placement: OverlayPlacement): OverlayPosition;
+}, placement: OverlayPlacement, alignment?: 'center' | 'end'): OverlayPosition;
 /**
  * 跟踪浮层的视口坐标。
  *
@@ -35,4 +35,4 @@ export declare function resolvePosition(trigger: DOMRect, surface: {
  * that is derivable during render. Scroll is captured so inner scroll containers
  * count too; listeners are removed on close or unmount.
  */
-export declare function useOverlayPosition(open: boolean, triggerRef: React.RefObject<HTMLElement | null>, surface: HTMLElement | null, placement: OverlayPlacement): OverlayPosition;
+export declare function useOverlayPosition(open: boolean, triggerRef: React.RefObject<HTMLElement | null>, surface: HTMLElement | null, placement: OverlayPlacement, alignment?: 'center' | 'end'): OverlayPosition;

package/dist/shared/components/tooltip/use-portal-theme.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from 'react';
+/** Keep a body portal in sync with the host's scoped public theme overrides. */
+export declare function usePortalTheme(open: boolean, triggerRef: RefObject<HTMLElement | null>, surface: HTMLElement | null): void;

package/dist/shared/locale.d.ts

@@ -0,0 +1,6 @@
+/** Internal language resources shared by components and modules. */
+export type Locale = 'en-US' | 'zh-CN';
+export type LocaleMessages<T> = Record<Locale, T>;
+/** Missing overrides inherit the selected language; empty strings stay explicit. */
+export declare function mergeLabels<T extends object>(defaults: T, overrides?: Partial<T>): T;
+export declare function resolveLocale<T extends object>(messages: LocaleMessages<T>, locale?: Locale, overrides?: Partial<T>): T;