@openviking/react 0.1.5 → 0.1.7

package/dist/n~0.js

@@ -1,13 +1,17 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cloneElement, forwardRef, useCallback, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import { resolveLocale, mergeLabels } from "./nx~0.js";
 import { FolderOpenIcon, FolderIcon, ChevronRightIcon, DocumentIcon } from "./k~0.js";
-import { useOverlayPosition } from "./o~0.js";
+import { Popover } from "./r~0.js";
+import { button_Button } from "./e~0.js";
 import { searchreact } from "./p~0.js";
+import { Tooltip } from "./rt~0.js";
 import { useLocale } from "./28~0.js";
 const messages = {
-    search: 'Search files…',
+    readOnly: 'Read-only',
+    noAccess: 'No access',
+    traverseOnly: 'Traverse only',
+    search: 'Search files ⌘+K...',
     refresh: 'Refresh file tree',
     empty: 'No files yet',
     error: 'Failed to load',
@@ -76,7 +80,10 @@ const messages = {
 };
 const en_US = messages;
 const zh_CN_messages = {
-    search: '搜索文件…',
+    readOnly: '只读',
+    noAccess: '无权限',
+    traverseOnly: '仅可遍历',
+    search: '搜索文件 ⌘+K...',
     refresh: '刷新文件树',
     empty: '暂无文件',
     error: '加载失败',
@@ -278,131 +285,6 @@ function resolveInfoCopy(key, hostLabels) {
         triggerBehavior: triggerBehavior || void 0
     };
 }
-function useMergedRef(ref, target) {
-    return useCallback((node)=>{
-        target.current = node;
-        if ('function' == typeof ref) ref(node);
-        else if (ref) ref.current = node;
-    }, [
-        ref,
-        target
-    ]);
-}
-function Popover({ children, content, placement = 'right', trigger = 'hover', delay = 300, disabled = false, className, style, onOpenChange }) {
-    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 || 'click' !== trigger) 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) change(false);
-        };
-        document.addEventListener('mousedown', onPointerDown);
-        document.addEventListener('keydown', onKeyDown);
-        return ()=>{
-            document.removeEventListener('mousedown', onPointerDown);
-            document.removeEventListener('keydown', onKeyDown);
-        };
-    }, [
-        change,
-        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();
-        change(false);
-    };
-    const child = children;
-    const childProps = child.props;
-    const childRef = child.ref;
-    const mergedRef = useMergedRef(childRef, triggerRef);
-    const declaresExpanded = 'aria-expanded' in childProps;
-    const triggerElement = /*#__PURE__*/ cloneElement(child, {
-        ref: mergedRef,
-        ...declaresExpanded ? {} : {
-            'aria-expanded': open
-        },
-        onMouseEnter: (event)=>{
-            childProps.onMouseEnter?.(event);
-            if ('hover' === trigger) show();
-        },
-        onMouseLeave: (event)=>{
-            childProps.onMouseLeave?.(event);
-            if ('hover' === trigger) hide();
-        },
-        onClick: (event)=>{
-            childProps.onClick?.(event);
-            if ('click' === trigger) show();
-        }
-    });
-    const surface = open ? /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
-        ref: setSurfaceNode,
-        id: id,
-        role: 'click' === trigger ? 'dialog' : 'note',
-        className: [
-            'ov-popover',
-            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
-        ]
-    });
-}
 const DEFAULT_FIELDS = {
     description: "Description",
     triggerBehavior: 'Trigger',
@@ -509,6 +391,7 @@ function Guides({ depth }) {
 }
 const FILE_TREE_ROW_ATTRIBUTE = 'data-file-tree-row-id';
 function FileTreeRowView({ row, ctx }) {
+    const anchorRef = useRef(null);
     const { text, selectedId, getRowAttributes, renderDashboard, renderRowTooltip, renderRowIcon, onSelect, onToggleExpand, onOpenRetentionSettings, onRowKeyDown } = ctx;
     const isDirectory = 'directory' === row.type;
     const canExpand = isDirectory && false !== row.hasChildren;
@@ -521,7 +404,7 @@ function FileTreeRowView({ row, ctx }) {
     const description = row.description ?? (infoKey && showsInlineDescription(infoKey) ? resolveInfoCopy(infoKey, ctx.infoLabels).description : void 0);
     const handleClick = (event)=>{
         if (event.target.closest('[data-role="toggle"]')) return;
-        if (row.disabled) return;
+        if (row.disabled || false === row.selectable) return;
         onSelect?.(row);
     };
     const handleToggle = (event)=>{
@@ -532,7 +415,7 @@ function FileTreeRowView({ row, ctx }) {
         role: "treeitem",
         tabIndex: 0,
         "aria-level": row.depth + 1,
-        "aria-selected": isSelected,
+        "aria-selected": false === row.selectable ? void 0 : isSelected,
         "aria-expanded": canExpand ? isExpanded : void 0,
         "aria-disabled": row.disabled || void 0,
         ...extraAttributes,
@@ -611,10 +494,22 @@ function FileTreeRowView({ row, ctx }) {
                 className: "ov-file-tree__level",
                 children: row.levelLabel
             }) : null,
+            row.access ? /*#__PURE__*/ jsx("span", {
+                className: "ov-file-tree__level",
+                children: 'read-only' === row.access ? text.readOnly : 'denied' === row.access ? text.noAccess : text.traverseOnly
+            }) : null,
             dashboard ? /*#__PURE__*/ jsx("span", {
                 className: "ov-file-tree__dashboard",
                 children: dashboard
-            }) : null
+            }) : null,
+            /*#__PURE__*/ jsx("span", {
+                className: "ov-file-tree__popover-anchor-container",
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ jsx("span", {
+                    ref: anchorRef,
+                    className: "ov-file-tree__popover-anchor"
+                })
+            })
         ]
     });
     const custom = renderRowTooltip?.(row);
@@ -628,6 +523,7 @@ function FileTreeRowView({ row, ctx }) {
     return /*#__PURE__*/ jsx(Popover, {
         content: tooltipContent,
         placement: "right",
+        anchorRef: anchorRef,
         trigger: "hover",
         children: rowNode
     });
@@ -682,8 +578,10 @@ function FileTreeStateRow({ row, ctx }) {
                         className: "ov-file-tree__toggle-spacer"
                     }),
                     row.loading ? spinner : null,
-                    /*#__PURE__*/ jsx("button", {
-                        type: "button",
+                    /*#__PURE__*/ jsx(button_Button, {
+                        size: "mini",
+                        type: "text",
+                        htmlType: "button",
                         className: "ov-file-tree__action",
                         disabled: row.loading || !onLoadMore,
                         onClick: ()=>onLoadMore?.(row),
@@ -701,8 +599,10 @@ function FileTreeStateRow({ row, ctx }) {
                         className: "ov-file-tree__muted",
                         children: row.message ?? text.error
                     }),
-                    /*#__PURE__*/ jsx("button", {
-                        type: "button",
+                    /*#__PURE__*/ jsx(button_Button, {
+                        size: "mini",
+                        type: "text",
+                        htmlType: "button",
                         className: "ov-file-tree__action",
                         disabled: !onRetry,
                         onClick: ()=>onRetry?.(row),
@@ -802,22 +702,27 @@ function handleRowKeyDown(event, { root, row, onSelect, onToggleExpand }) {
         case 'Enter':
         case ' ':
             event.preventDefault();
-            if (!row.disabled) onSelect?.(row);
+            if (!row.disabled && false !== row.selectable) onSelect?.(row);
             return;
         default:
             return;
     }
 }
-function FileTreeToolbar({ search, refresh, text, refreshing, onSearch, onRefresh }) {
+function FileTreeToolbar({ search, refresh, loading, text, refreshing, onSearch, onRefresh, className }) {
     if (!search && !refresh) return null;
     const searchDisabled = !onSearch || 'object' == typeof search && search.disabled;
     const refreshDisabled = !onRefresh || 'object' == typeof refresh && refresh.disabled;
-    const busy = refreshing || 'object' == typeof refresh && refresh.loading;
+    const busy = loading || refreshing || 'object' == typeof refresh && refresh.loading;
     return /*#__PURE__*/ jsxs("div", {
-        className: "ov-file-tree__controls",
+        className: [
+            'ov-file-tree__controls',
+            className
+        ].filter(Boolean).join(' '),
         children: [
-            search ? /*#__PURE__*/ jsxs("button", {
-                type: "button",
+            search ? /*#__PURE__*/ jsxs(button_Button, {
+                size: "default",
+                type: "default",
+                htmlType: "button",
                 className: "ov-file-tree__search",
                 disabled: Boolean(searchDisabled),
                 onClick: onSearch,
@@ -834,27 +739,29 @@ function FileTreeToolbar({ search, refresh, text, refreshing, onSearch, onRefres
                     })
                 ]
             }) : null,
-            refresh ? /*#__PURE__*/ jsx("button", {
-                type: "button",
-                className: "ov-file-tree__refresh",
-                "aria-label": text.refresh,
-                title: text.refresh,
-                "aria-busy": Boolean(busy),
+            refresh ? /*#__PURE__*/ jsx(Tooltip, {
+                content: text.refresh,
                 disabled: Boolean(refreshDisabled || busy),
-                onClick: onRefresh,
-                children: /*#__PURE__*/ jsx("svg", {
-                    "aria-hidden": "true",
-                    width: 14,
-                    height: 14,
-                    viewBox: "0 0 16 16",
-                    fill: "none",
-                    className: busy ? 'ov-file-tree__refresh-spinning' : void 0,
-                    children: /*#__PURE__*/ jsx("path", {
-                        d: "M13 6a5.2 5.2 0 1 0 .15 3.5M13 2.5V6H9.5",
-                        stroke: "currentColor",
-                        strokeWidth: "1.5",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round"
+                children: /*#__PURE__*/ jsx(button_Button, {
+                    className: "ov-file-tree__refresh",
+                    "aria-label": text.refresh,
+                    "aria-busy": Boolean(busy),
+                    loading: Boolean(busy),
+                    disabled: Boolean(refreshDisabled),
+                    onClick: onRefresh,
+                    icon: /*#__PURE__*/ jsx("svg", {
+                        "aria-hidden": "true",
+                        width: 14,
+                        height: 14,
+                        viewBox: "0 0 16 16",
+                        fill: "none",
+                        children: /*#__PURE__*/ jsx("path", {
+                            d: "M13 6a5.2 5.2 0 1 0 .15 3.5M13 2.5V6H9.5",
+                            stroke: "currentColor",
+                            strokeWidth: "1.5",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                        })
                     })
                 })
             }) : null
@@ -905,7 +812,7 @@ function FileTreeSpinner({ className, ...rest }) {
 function findRow(root, id) {
     return root?.querySelector(`[${FILE_TREE_ROW_ATTRIBUTE}="${CSS.escape(id)}"]`) ?? null;
 }
-const file_tree_FileTree = /*#__PURE__*/ forwardRef(function({ rows, locale: localeProp, operations, selectedId, search, refresh, isReady = true, loadingFallback, errorFallback, emptyFallback, slots, labels, getRowAttributes, renderDashboard, renderRowTooltip, renderRowIcon, onSelect, onToggleExpand, onLoadMore, onRetry, onOpenRetentionSettings, onSearch, onRefresh, className, ...rest }, ref) {
+const file_tree_FileTree = /*#__PURE__*/ forwardRef(function({ rows, locale: localeProp, operations, selectedId, search = true, refresh = true, loading = false, isReady = true, loadingFallback, errorFallback, emptyFallback, slots, labels, getRowAttributes, renderDashboard, renderRowTooltip, renderRowIcon, onSelect, onToggleExpand, onLoadMore, onRetry, onOpenRetentionSettings, onSearch, onRefresh, className, ...rest }, ref) {
     const locale = useLocale(localeProp);
     const rootRef = useRef(null);
     const text = resolveFileTreeLabels(locale, labels);
@@ -963,6 +870,7 @@ const file_tree_FileTree = /*#__PURE__*/ forwardRef(function({ rows, locale: loc
             /*#__PURE__*/ jsx(FileTreeToolbar, {
                 search: search,
                 refresh: refresh,
+                loading: loading,
                 text: text,
                 refreshing: actions.refreshing,
                 onSearch: actions.onSearch,
@@ -985,4 +893,4 @@ const file_tree_FileTree = /*#__PURE__*/ forwardRef(function({ rows, locale: loc
         ]
     });
 });
-export { DEFAULT_INFO_LABELS, FILE_TREE_ROW_ATTRIBUTE, FileTreeSpinner, file_tree_FileTree as FileTree, resolveFileTreeInfoKey, resolveInfoCopy, showsInlineDescription, splitVikingUri };
+export { DEFAULT_INFO_LABELS, FILE_TREE_ROW_ATTRIBUTE, FileTreeSpinner, FileTreeToolbar, file_tree_FileTree as FileTree, resolveFileTreeInfoKey, resolveInfoCopy, showsInlineDescription, splitVikingUri };

package/dist/rt~0.js

@@ -0,0 +1,255 @@
+import { cloneElement, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+const usePositionEffect = "u" < typeof window ? useEffect : useLayoutEffect;
+const OVERLAY_OFFSET = 6;
+const VIEWPORT_MARGIN = 8;
+const OPPOSITE = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left'
+};
+function resolvePosition(trigger, surface, placement, alignment = 'center') {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const fits = (side)=>{
+        if ('top' === side) return trigger.top - surface.height - OVERLAY_OFFSET >= VIEWPORT_MARGIN;
+        if ('bottom' === side) return trigger.bottom + surface.height + OVERLAY_OFFSET <= viewportHeight - VIEWPORT_MARGIN;
+        if ('left' === side) return trigger.left - surface.width - OVERLAY_OFFSET >= VIEWPORT_MARGIN;
+        return trigger.right + surface.width + OVERLAY_OFFSET <= viewportWidth - VIEWPORT_MARGIN;
+    };
+    const side = fits(placement) || !fits(OPPOSITE[placement]) ? placement : OPPOSITE[placement];
+    const clamp = (value, size, limit)=>Math.min(Math.max(value, VIEWPORT_MARGIN), limit - size - VIEWPORT_MARGIN);
+    if ('top' === side || 'bottom' === side) {
+        const top = 'top' === side ? trigger.top - surface.height - OVERLAY_OFFSET : trigger.bottom + OVERLAY_OFFSET;
+        const left = 'end' === alignment ? trigger.right - surface.width : trigger.left + trigger.width / 2 - surface.width / 2;
+        return {
+            top: clamp(top, surface.height, viewportHeight),
+            left: clamp(left, surface.width, viewportWidth),
+            placement: side
+        };
+    }
+    const left = 'left' === side ? trigger.left - surface.width - OVERLAY_OFFSET : trigger.right + OVERLAY_OFFSET;
+    const top = trigger.top + trigger.height / 2 - surface.height / 2;
+    return {
+        top: clamp(top, surface.height, viewportHeight),
+        left: clamp(left, surface.width, viewportWidth),
+        placement: side
+    };
+}
+function useOverlayPosition(open, triggerRef, surface, placement, alignment = 'center') {
+    const [position, setPosition] = useState({
+        top: 0,
+        left: 0,
+        placement
+    });
+    usePositionEffect(()=>{
+        if (!open) return;
+        const trigger = triggerRef.current;
+        if (!trigger || !surface) return;
+        const written = new Set();
+        const syncTheme = ()=>{
+            const triggerStyle = window.getComputedStyle(trigger);
+            const seen = new Set();
+            for (const name of Array.from(triggerStyle)){
+                if (!name.startsWith('--ov-ui-color-')) continue;
+                const value = triggerStyle.getPropertyValue(name).trim();
+                if (value) {
+                    seen.add(name);
+                    surface.style.setProperty(name, value);
+                }
+            }
+            for (const name of written)if (!seen.has(name)) surface.style.removeProperty(name);
+            written.clear();
+            seen.forEach((name)=>written.add(name));
+        };
+        syncTheme();
+        const themeObserver = new MutationObserver(syncTheme);
+        const observerOptions = {
+            attributes: true,
+            attributeFilter: [
+                'class',
+                'style',
+                'data-theme'
+            ]
+        };
+        for(let node = trigger; node; node = node.parentElement)themeObserver.observe(node, observerOptions);
+        const update = ()=>{
+            const triggerRect = trigger.getBoundingClientRect();
+            const surfaceRect = surface.getBoundingClientRect();
+            const next = resolvePosition(triggerRect, {
+                width: surfaceRect.width,
+                height: surfaceRect.height
+            }, placement, alignment);
+            setPosition((previous)=>previous.top === next.top && previous.left === next.left && previous.placement === next.placement ? previous : next);
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(surface);
+        window.addEventListener('scroll', update, true);
+        window.addEventListener('resize', update);
+        return ()=>{
+            observer.disconnect();
+            themeObserver.disconnect();
+            written.forEach((name)=>surface.style.removeProperty(name));
+            window.removeEventListener('scroll', update, true);
+            window.removeEventListener('resize', update);
+        };
+    }, [
+        open,
+        placement,
+        surface,
+        triggerRef,
+        alignment
+    ]);
+    return position;
+}
+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': childProps['aria-describedby'] ?? (open && 'hover' === trigger && content !== childProps['aria-label'] ? 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, useOverlayPosition };