@openviking/react 0.1.6 → 0.1.7

package/dist/n~0.js

@@ -3,10 +3,15 @@ import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import { resolveLocale, mergeLabels } from "./nx~0.js";
 import { FolderOpenIcon, FolderIcon, ChevronRightIcon, DocumentIcon } from "./k~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',
@@ -75,7 +80,10 @@ const messages = {
 };
 const en_US = messages;
 const zh_CN_messages = {
-    search: '搜索文件…',
+    readOnly: '只读',
+    noAccess: '无权限',
+    traverseOnly: '仅可遍历',
+    search: '搜索文件 ⌘+K...',
     refresh: '刷新文件树',
     empty: '暂无文件',
     error: '加载失败',
@@ -396,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)=>{
@@ -407,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,
@@ -486,6 +494,10 @@ 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
@@ -566,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),
@@ -585,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),
@@ -686,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,
@@ -718,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
@@ -789,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);
@@ -847,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,
@@ -869,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

@@ -1,7 +1,110 @@
+import { cloneElement, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 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 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'
 };
@@ -100,7 +203,7 @@ function Tooltip({ children, content, placement = 'top', trigger = 'hover', dela
     const mergedRef = useMergedRef(childRef, triggerRef);
     const triggerElement = /*#__PURE__*/ cloneElement(child, {
         ref: mergedRef,
-        'aria-describedby': open && 'hover' === trigger ? id : void 0,
+        '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);
@@ -149,4 +252,4 @@ function Tooltip({ children, content, placement = 'top', trigger = 'hover', dela
         ]
     });
 }
-export { Tooltip };
+export { Tooltip, useOverlayPosition };

package/dist/r~0.js

@@ -1,7 +1,7 @@
 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";
+import { useOverlayPosition } from "./rt~0.js";
 function useMergedRef(ref, target) {
     return useCallback((node)=>{
         target.current = node;

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

@@ -0,0 +1,20 @@
+/**
+ * Adapted from Arco Design Button (MIT), commit 4e087a0fe7d5ae2f222fbce4a9518ba047b01772.
+ * https://github.com/arco-design/arco-design/tree/4e087a0fe7d5ae2f222fbce4a9518ba047b01772/components/Button
+ * Copyright (c) 2021 Bytedance, Inc. and its affiliates. See LICENSE.arco-design.
+ * Keeps native events/ref, variants, sizes, icons and loading; omits links,
+ * groups, status palettes, Chinese-character spacing and ConfigProvider coupling.
+ * Visual rules come from the console's theme-ve-o-aml-design@0.0.36 skin.
+ */
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    type?: 'default' | 'primary' | 'secondary' | 'outline' | 'text';
+    htmlType?: 'button' | 'submit' | 'reset';
+    size?: 'mini' | 'small' | 'default' | 'large';
+    shape?: 'square' | 'circle';
+    icon?: ReactNode;
+    iconOnly?: boolean;
+    loading?: boolean;
+    long?: boolean;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,17 @@
+/**
+ * Adapted from Arco Design Input (MIT), commit 4e087a0fe7d5ae2f222fbce4a9518ba047b01772.
+ * https://github.com/arco-design/arco-design/tree/4e087a0fe7d5ae2f222fbce4a9518ba047b01772/components/Input
+ * Copyright (c) 2021 Bytedance, Inc. and its affiliates. See LICENSE.arco-design.
+ * Native value/events/ref and affixes only. No password toggles, groups, clear buttons,
+ * word counters, auto-width/auto-size, value truncation or ConfigProvider.
+ * Visual rules come from the console's theme-ve-o-aml-design@0.0.36 skin.
+ */
+import { type InputHTMLAttributes, type ReactNode, type TextareaHTMLAttributes } from 'react';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
+    type?: 'text' | 'search' | 'email' | 'url' | 'tel' | 'password' | 'number';
+    size?: 'mini' | 'small' | 'default' | 'large';
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/shared/components/modal/locales/en-US.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    closeLabel: string;
+};
+export default _default;

package/dist/shared/components/modal/locales/zh-CN.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    closeLabel: string;
+};
+export default _default;

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

@@ -0,0 +1,2 @@
+import type { ModalProps } from './types.js';
+export declare function Modal({ open, title, triggerRef, id, className, locale: localeProp, onClose, children, closeLabel, }: ModalProps): import("react").ReactPortal | null;

package/dist/shared/components/modal/types.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode, RefObject } from 'react';
+import type { Locale } from '../../locale.js';
+/** A controlled modal with the same overlay capabilities as the internal Drawer. */
+export interface ModalProps {
+    open: boolean;
+    children: ReactNode;
+    /** Accessible name; render a visible heading inside children. */
+    title: string;
+    /** Theme anchor; focus returns to the element active when the modal opened. */
+    triggerRef: RefObject<HTMLElement | null>;
+    id?: string;
+    className?: string;
+    locale?: Locale;
+    /** Overrides the localized close button name, including an explicit empty string. */
+    closeLabel?: string;
+    /** Close intent from the mask, close button or Escape. The host controls open. */
+    onClose?: () => void;
+}

package/dist/shared/components/overlay/lock-body-scroll.d.ts

@@ -0,0 +1 @@
+export declare function lockBodyScroll(body: HTMLElement): () => void;