@ioca/react 1.5.2 → 1.5.4

package/lib/index.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { debounce, uid, throttle, title } from 'radash';
-import { useState, useRef, useEffect, useMemo, Children, cloneElement, createElement, isValidElement, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, useImperativeHandle, createContext, useContext } from 'react';
+import { useState, useRef, useCallback, useEffect, useMemo, Children, cloneElement, createElement, isValidElement, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, memo, createContext, useContext, useImperativeHandle } from 'react';
 import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, ClearAllRound, UndoRound, RedoRound, StrikethroughSRound, FormatUnderlinedRound, FormatItalicRound, FormatBoldRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, ListAltRound, DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
 import { createRoot } from 'react-dom/client';
 import { createPortal } from 'react-dom';
-import xss from 'xss';
+import xss, { escapeAttrValue } from 'xss';
+import { renderToStaticMarkup } from 'react-dom/server';
 import PubSub from 'pubsub-js';
 import { findAll } from 'highlight-words-core';
 import ColorsPanel from '@rc-component/color-picker';
@@ -234,31 +235,41 @@ const defaultObserver = {
     disconnect: undefined,
 };
 function useIntersectionObserver(configs) {
+    const wmRef = useRef(new WeakMap());
+    const ioRef = useRef(undefined);
+    if (typeof window !== "undefined" && !ioRef.current) {
+        ioRef.current = new IntersectionObserver((entries) => {
+            entries.map((entry) => {
+                const callback = wmRef.current.get(entry.target);
+                callback?.(entry.target, entry.isIntersecting);
+            });
+        }, configs);
+    }
+    const observe = useCallback((target, callback) => {
+        if (!target || !ioRef.current || wmRef.current.get(target))
+            return;
+        wmRef.current.set(target, callback);
+        ioRef.current.observe(target);
+    }, []);
+    const unobserve = useCallback((target) => {
+        if (!target || !ioRef.current)
+            return;
+        ioRef.current.unobserve(target);
+        wmRef.current.delete(target);
+    }, []);
+    const disconnect = useCallback(() => {
+        ioRef.current?.disconnect();
+    }, []);
+    useEffect(() => {
+        return () => {
+            ioRef.current?.disconnect();
+        };
+    }, []);
     if (typeof window === "undefined") {
         return {
             ...defaultObserver,
         };
     }
-    const WM = new WeakMap();
-    const IO = new IntersectionObserver((entries) => {
-        entries.map((entry) => {
-            const callback = WM.get(entry.target);
-            callback?.(entry.target, entry.isIntersecting);
-        });
-    }, configs);
-    function observe(target, callback) {
-        if (WM.get(target))
-            return;
-        WM.set(target, callback);
-        target && IO.observe(target);
-    }
-    function unobserve(target) {
-        target && IO.unobserve(target);
-        WM.delete(target);
-    }
-    function disconnect() {
-        IO.disconnect();
-    }
     return {
         observe,
         unobserve,
@@ -266,31 +277,41 @@ function useIntersectionObserver(configs) {
     };
 }
 function useResizeObserver() {
+    const wmRef = useRef(new WeakMap());
+    const ioRef = useRef(undefined);
+    if (typeof window !== "undefined" && !ioRef.current) {
+        ioRef.current = new ResizeObserver((entries) => {
+            entries.map((entry) => {
+                const callback = wmRef.current.get(entry.target);
+                callback?.(entry.target);
+            });
+        });
+    }
+    const observe = useCallback((target, callback) => {
+        if (!target || !ioRef.current || wmRef.current.get(target))
+            return;
+        ioRef.current.observe(target);
+        wmRef.current.set(target, callback);
+    }, []);
+    const unobserve = useCallback((target) => {
+        if (!target || !ioRef.current)
+            return;
+        ioRef.current.unobserve(target);
+        wmRef.current.delete(target);
+    }, []);
+    const disconnect = useCallback(() => {
+        ioRef.current?.disconnect();
+    }, []);
+    useEffect(() => {
+        return () => {
+            ioRef.current?.disconnect();
+        };
+    }, []);
     if (typeof window === "undefined") {
         return {
             ...defaultObserver,
         };
     }
-    const WM = new WeakMap();
-    const IO = new ResizeObserver((entries) => {
-        entries.map((entry) => {
-            const callback = WM.get(entry.target);
-            callback?.(entry.target);
-        });
-    });
-    function observe(target, callback) {
-        if (WM.get(target))
-            return;
-        target && IO.observe(target);
-        WM.set(target, callback);
-    }
-    function unobserve(target) {
-        target && IO.unobserve(target);
-        WM.delete(target);
-    }
-    function disconnect() {
-        IO.disconnect();
-    }
     return {
         observe,
         unobserve,
@@ -1823,153 +1844,454 @@ const Dropdown = (props) => {
 };
 Dropdown.Item = Item$3;
 
-const { escapeAttrValue } = xss;
 const exec = (a, b, c) => {
     if (typeof document === "undefined")
         return;
     return document.execCommand(a, b, c);
 };
 const xssOptions = {
-    onIgnoreTagAttr: function (tag, name, value) {
-        if (["data-", "style"].includes(name.substr(0, 5))) {
+    onIgnoreTagAttr(tag, name, value) {
+        if (["class", "contenteditable"].includes(name)) {
+            return name + '="' + escapeAttrValue(value) + '"';
+        }
+        if (["data-", "style"].includes(name.substring(0, 5))) {
             return name + '="' + escapeAttrValue(value) + '"';
         }
     },
 };
+const handleMouseDown = (e) => {
+    e.preventDefault();
+};
 const fnMap = {
     bold: {
         icon: jsx(FormatBoldRound, {}),
         onClick: () => exec("bold"),
-        tip: "粗体",
     },
     italic: {
         icon: jsx(FormatItalicRound, {}),
         onClick: () => exec("italic"),
-        tip: "斜体",
     },
     underline: {
         icon: jsx(FormatUnderlinedRound, {}),
         onClick: () => exec("underline"),
-        tip: "下划线",
     },
     strike: {
         icon: jsx(StrikethroughSRound, {}),
         onClick: () => exec("strikeThrough"),
-        tip: "删除线",
     },
     redo: {
         icon: jsx(RedoRound, {}),
         onClick: () => exec("redo"),
-        tip: "重做",
     },
     undo: {
         icon: jsx(UndoRound, {}),
         onClick: () => exec("undo"),
-        tip: "撤销",
     },
-    // color: {
-    // 	icon: <FormatColorTextRound />,
-    // 	onClick: () => exec("foreColor", false, ""),
-    // },
-    // backColor: {
-    // 	icon: <FormatColorFillRound />,
-    // 	onClick: () => exec("backColor", false, ""),
-    // },
     clear: {
         icon: jsx(ClearAllRound, {}),
         onClick: () => exec("removeFormat"),
-        tip: "清除格式",
     },
 };
-const aliasMap = {
-    simple: ["undo", "redo", "bold", "italic", "underline", "strike", "clear"],
-    all: Object.keys(fnMap),
+const defaultKeys = [
+    "undo",
+    "redo",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "clear",
+];
+const typedFnMap = fnMap;
+function getControls(options) {
+    const { controlBtnProps, addtionControls, getSelection } = options;
+    const controls = defaultKeys.map((k) => {
+        const { icon, onClick } = typedFnMap[k];
+        return (jsx(Button, { ...controlBtnProps, onMouseDown: handleMouseDown, onClick: onClick, children: jsx(Icon, { icon: icon }) }, k));
+    });
+    const extControls = (addtionControls ?? []).map((item, index) => (jsx(Button, { ...controlBtnProps, onMouseDown: handleMouseDown, onClick: (e) => item.onClick?.(getSelection(), e), children: item.icon }, `addtion-${index}`)));
+    return [...controls, ...extControls];
+}
+
+const MEMTION_TAG_CLASS_NAME = "i-memtion-tag";
+const getInsertNode = (memtion, option) => memtion?.insert?.(option) ?? option.value;
+const getInsertText = (memtion, option) => {
+    const nextNode = getInsertNode(memtion, option);
+    if (typeof nextNode === "string" || typeof nextNode === "number") {
+        return `${String(nextNode)} `;
+    }
+    return `${String(option.value)} `;
+};
+const getInsertHtml = (memtion, option, sanitizeValue) => {
+    const nextNode = getInsertNode(memtion, option);
+    if (nextNode === null || nextNode === undefined || nextNode === false) {
+        return "";
+    }
+    const content = sanitizeValue(renderToStaticMarkup(jsx(Fragment, { children: nextNode })));
+    return `<span class="${MEMTION_TAG_CLASS_NAME}" contenteditable="false" data-memtion-value="${escapeAttrValue(String(option.value))}">${content}</span>`;
+};
+const getSelectionRect = (range) => {
+    if (!range)
+        return null;
+    const rect = range.getBoundingClientRect();
+    if (rect.width || rect.height) {
+        return rect;
+    }
+    return range.getClientRects()[0] ?? rect;
+};
+const insertMemtionOption = ({ editor, range, mode, memtion, option, sanitizeValue, }) => {
+    if (!editor || !range)
+        return null;
+    const browserSelection = window.getSelection();
+    if (!browserSelection)
+        return null;
+    const nextRange = range.cloneRange();
+    browserSelection.removeAllRanges();
+    browserSelection.addRange(nextRange);
+    editor.focus();
+    nextRange.deleteContents();
+    if (mode === "plaintext") {
+        const text = document.createTextNode(getInsertText(memtion, option));
+        nextRange.insertNode(text);
+        nextRange.setStartAfter(text);
+    }
+    else {
+        const html = getInsertHtml(memtion, option, sanitizeValue);
+        const fragment = nextRange.createContextualFragment(html);
+        const lastNode = fragment.lastChild;
+        const spacing = document.createTextNode(" ");
+        nextRange.insertNode(fragment);
+        if (lastNode) {
+            nextRange.setStartAfter(lastNode);
+            nextRange.collapse(true);
+        }
+        nextRange.insertNode(spacing);
+        nextRange.setStartAfter(spacing);
+    }
+    nextRange.collapse(true);
+    browserSelection.removeAllRanges();
+    browserSelection.addRange(nextRange);
+    return nextRange;
 };
-function getControls(fns, options) {
-    const { controlBtnProps } = options;
-    const keys = typeof fns === "string" ? aliasMap[fns] : fns;
-    return keys.map((k) => {
-        if (fnMap[k]) {
-            const { icon, render, tip, onClick } = fnMap[k];
-            if (render) {
-                return render(options);
+const getMemtionText = (triggerRange, selectionRange) => {
+    if (!triggerRange || !selectionRange)
+        return "";
+    const range = triggerRange.cloneRange();
+    range.setEnd(selectionRange.endContainer, selectionRange.endOffset);
+    return range.toString();
+};
+const getMemtionReplaceRange = (triggerRange, selectionRange) => {
+    if (!triggerRange || !selectionRange)
+        return null;
+    const range = triggerRange.cloneRange();
+    range.setEnd(selectionRange.endContainer, selectionRange.endOffset);
+    return range;
+};
+const filterMemtionOptions = (options, keyword) => {
+    const normalizedKeyword = keyword.trim().toLowerCase();
+    if (!normalizedKeyword) {
+        return options;
+    }
+    return options.filter((option) => String(option.value).toLowerCase().includes(normalizedKeyword));
+};
+const isMemtionTag = (node) => node instanceof HTMLElement &&
+    node.classList.contains(MEMTION_TAG_CLASS_NAME);
+const getAdjacentMemtionTag = (range, direction) => {
+    const { startContainer, startOffset } = range;
+    if (startContainer.nodeType === Node.TEXT_NODE) {
+        const textNode = startContainer;
+        if (direction === "backward" && startOffset === 0) {
+            return isMemtionTag(textNode.previousSibling)
+                ? textNode.previousSibling
+                : null;
+        }
+        if (direction === "forward" && startOffset === textNode.data.length) {
+            return isMemtionTag(textNode.nextSibling)
+                ? textNode.nextSibling
+                : null;
+        }
+        return null;
+    }
+    const element = startContainer;
+    const targetIndex = direction === "backward" ? startOffset - 1 : startOffset;
+    const targetNode = element.childNodes.item(targetIndex);
+    return isMemtionTag(targetNode) ? targetNode : null;
+};
+const removeAdjacentMemtionTag = (editor, key) => {
+    if (!editor)
+        return false;
+    const selection = window.getSelection();
+    if (!selection?.rangeCount || !selection.isCollapsed)
+        return false;
+    const activeRange = selection.getRangeAt(0);
+    const tag = getAdjacentMemtionTag(activeRange, key === "Backspace" ? "backward" : "forward");
+    if (!tag || !tag.parentNode)
+        return false;
+    const parent = tag.parentNode;
+    const nextSibling = tag.nextSibling;
+    const index = Array.prototype.indexOf.call(parent.childNodes, tag);
+    if (nextSibling?.nodeType === Node.TEXT_NODE) {
+        const textNode = nextSibling;
+        if (textNode.data.startsWith(" ")) {
+            textNode.deleteData(0, 1);
+            if (!textNode.data.length) {
+                nextSibling.remove();
             }
-            return (jsxs(Button, { ...controlBtnProps, onClick: onClick, children: [jsx(Icon, { icon: icon }), tip && jsx("span", { className: 'i-editor-control-tip', children: tip })] }, k));
         }
-        return jsx(Fragment, {}, k);
-    });
-}
+    }
+    tag.remove();
+    const range = document.createRange();
+    range.setStart(parent, Math.min(index, parent.childNodes.length));
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    editor.focus();
+    return true;
+};
+const Memtion = (props) => {
+    const { visible, rect, options, activeIndex, onActiveChange, onSelect } = props;
+    if (!visible || !rect || !options?.length) {
+        return null;
+    }
+    return (jsx(List$1, { className: "i-editor-memtion", type: "option", style: {
+            position: "fixed",
+            top: rect.bottom,
+            left: rect.left,
+        }, children: options.map((option, i) => (jsx(List$1.Item, { type: "option", active: i === activeIndex, onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => onActiveChange?.(i), onClick: () => onSelect?.(option), children: option.label }, `${option.value}-${i}`))) }));
+};
+var Memtion$1 = memo(Memtion);
 
+const controlBtnProps = {
+    square: true,
+    flat: true,
+    size: "small",
+};
 const Editor = (props) => {
-    const { ref, width, height = "10em", placeholder, autosize, border = true, richPaste, controls = "simple", className, style, onInput, onPaste, onKeyDown, ...restProps } = props;
+    const { ref, value = "", width, height = "10em", placeholder, autosize, border = true, mode = "rich", hideControl, addtionControls, memtion, className, style, onChange, onEnter, onFocus, onBlur, onPaste, onMouseUp, onKeyUp, onKeyDown, ...restProps } = props;
     const editorRef = useRef(null);
-    const controlBtnProps = {
-        square: true,
-        flat: true,
-        size: "small",
+    const selectionRef = useRef(null);
+    const memtionTriggerRangeRef = useRef(null);
+    const pendingMemtionRef = useRef(false);
+    const [memtionVisible, setMemtionVisible] = useState(false);
+    const [memtionRect, setMemtionRect] = useState(null);
+    const [memtionKeyword, setMemtionKeyword] = useState("");
+    const [memtionActiveIndex, setMemtionActiveIndex] = useState(0);
+    const memtionOptions = useMemo(() => filterMemtionOptions(memtion?.options ?? [], memtionKeyword), [memtion?.options, memtionKeyword]);
+    const sanitizeValue = (nextValue) => {
+        if (mode === "plaintext") {
+            return nextValue === "\n" ? "" : nextValue;
+        }
+        const safeHtml = xss(nextValue, xssOptions);
+        return safeHtml === "<br>" ? "" : safeHtml;
+    };
+    const rememberSelection = () => {
+        if (!editorRef.current)
+            return;
+        const selection = window.getSelection();
+        if (!selection?.rangeCount)
+            return;
+        const range = selection.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const parent = container.nodeType === Node.ELEMENT_NODE
+            ? container
+            : container.parentElement;
+        if (!parent || !editorRef.current.contains(parent))
+            return;
+        selectionRef.current = range.cloneRange();
+    };
+    const setEditorValue = (nextValue) => {
+        if (!editorRef.current)
+            return;
+        const safeValue = sanitizeValue(nextValue);
+        if (mode === "plaintext") {
+            editorRef.current.textContent = safeValue;
+            return;
+        }
+        editorRef.current.innerHTML = safeValue;
     };
-    const handlePaste = async (e) => {
+    const getEditorValue = (sanitize = false) => {
+        if (!editorRef.current)
+            return "";
+        const nextValue = mode === "plaintext"
+            ? (editorRef.current.textContent ?? "")
+            : editorRef.current.innerHTML;
+        return sanitize ? sanitizeValue(nextValue) : nextValue;
+    };
+    const hideMemtion = () => {
+        pendingMemtionRef.current = false;
+        memtionTriggerRangeRef.current = null;
+        setMemtionVisible(false);
+        setMemtionRect(null);
+        setMemtionKeyword("");
+        setMemtionActiveIndex(0);
+    };
+    const insertMemtion = (option) => {
+        const replaceRange = getMemtionReplaceRange(memtionTriggerRangeRef.current, selectionRef.current);
+        const range = insertMemtionOption({
+            editor: editorRef.current,
+            range: replaceRange,
+            mode,
+            memtion,
+            option,
+            sanitizeValue,
+        });
+        if (!range || !editorRef.current)
+            return;
+        selectionRef.current = range.cloneRange();
+        hideMemtion();
+        editorRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+    };
+    const handlePaste = (e) => {
         onPaste?.(e);
-        if (richPaste)
+        if (e.defaultPrevented)
             return;
         e.preventDefault();
+        if (mode === "plaintext") {
+            const text = e.clipboardData.getData("text/plain");
+            exec("insertText", false, text);
+            return;
+        }
+        const html = e.clipboardData.getData("text/html");
+        if (html) {
+            exec("insertHTML", false, sanitizeValue(html));
+            return;
+        }
         const text = e.clipboardData.getData("text/plain");
         exec("insertText", false, text);
     };
     const handleKeyDown = (e) => {
         onKeyDown?.(e);
+        if (mode === "rich" &&
+            (e.key === "Backspace" || e.key === "Delete") &&
+            removeAdjacentMemtionTag(editorRef.current, e.key)) {
+            e.preventDefault();
+            rememberSelection();
+            editorRef.current?.dispatchEvent(new Event("input", { bubbles: true }));
+            return;
+        }
+        const memtionKey = memtion?.key ?? "@";
+        if (memtionVisible && e.key === " ") {
+            hideMemtion();
+        }
+        if (memtionVisible && memtionOptions.length) {
+            switch (e.key) {
+                case "ArrowDown":
+                    e.preventDefault();
+                    setMemtionActiveIndex((index) => index + 1 >= memtionOptions.length ? 0 : index + 1);
+                    return;
+                case "ArrowUp":
+                    e.preventDefault();
+                    setMemtionActiveIndex((index) => index - 1 < 0 ? memtionOptions.length - 1 : index - 1);
+                    return;
+                case "Enter":
+                    e.preventDefault();
+                    insertMemtion(memtionOptions[memtionActiveIndex]);
+                    return;
+            }
+        }
+        if (memtion && e.key === memtionKey) {
+            rememberSelection();
+            memtionTriggerRangeRef.current =
+                selectionRef.current?.cloneRange() ?? null;
+            pendingMemtionRef.current = true;
+        }
         switch (e.key) {
             case "Tab":
                 e.preventDefault();
-                exec("insertHTML", false, "&#09;");
+                exec(mode === "plaintext" ? "insertText" : "insertHTML", false, mode === "plaintext" ? "\t" : "&#09;");
                 break;
             case "Enter":
+                if (!onEnter)
+                    break;
                 e.preventDefault();
-                exec("insertLineBreak");
-                if (!editorRef.current)
-                    return;
-                editorRef.current.scrollBy({
-                    top: 20,
-                    left: -1e3,
-                });
-                if (!autosize)
-                    return;
-                editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;
+                onEnter(e);
                 break;
         }
     };
-    useImperativeHandle(ref, () => {
-        return {
-            input: editorRef.current,
-            setValue(html) {
-                if (!editorRef.current)
-                    return;
-                const safeHtml = xss(html, xssOptions);
-                editorRef.current.innerHTML = safeHtml;
-            },
-            getSafeValue() {
-                const html = editorRef.current?.innerHTML ?? "";
-                return xss(html, xssOptions);
-            },
-        };
-    });
+    useEffect(() => {
+        if (!editorRef.current)
+            return;
+        const nextValue = sanitizeValue(value);
+        if (getEditorValue(true) === nextValue)
+            return;
+        setEditorValue(nextValue);
+        if (autosize) {
+            editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;
+        }
+    }, [autosize, mode, value]);
+    useEffect(() => {
+        if (!memtionOptions.length) {
+            setMemtionActiveIndex(0);
+            return;
+        }
+        setMemtionActiveIndex((index) => index >= memtionOptions.length ? 0 : index);
+    }, [memtionOptions]);
     const handleInput = (e) => {
-        let html = editorRef.current?.innerHTML ?? "";
-        if (["<br>", "\n"].includes(html) && editorRef.current) {
-            html = "";
-            editorRef.current.innerHTML = html;
+        const rawValue = getEditorValue();
+        let nextValue = sanitizeValue(rawValue);
+        if (!nextValue && rawValue && editorRef.current) {
+            nextValue = "";
+            setEditorValue(nextValue);
+        }
+        rememberSelection();
+        if (memtion && (pendingMemtionRef.current || memtionVisible)) {
+            const memtionKey = memtion?.key ?? "@";
+            const memtionText = getMemtionText(memtionTriggerRangeRef.current, selectionRef.current);
+            if (!memtionText.startsWith(memtionKey) || /\s/.test(memtionText)) {
+                hideMemtion();
+            }
+            else {
+                const keyword = memtionText.slice(memtionKey.length);
+                pendingMemtionRef.current = false;
+                setMemtionRect(getSelectionRect(selectionRef.current));
+                setMemtionKeyword(keyword);
+                setMemtionActiveIndex(0);
+                setMemtionVisible(true);
+            }
+        }
+        if (autosize && editorRef.current) {
+            editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;
         }
-        onInput?.(html, e);
+        onChange?.(nextValue, e);
+    };
+    const handleFocus = (e) => {
+        rememberSelection();
+        onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        hideMemtion();
+        onBlur?.(e);
     };
+    const handleMouseUp = (e) => {
+        rememberSelection();
+        onMouseUp?.(e);
+    };
+    const handleKeyUp = (e) => {
+        rememberSelection();
+        onKeyUp?.(e);
+    };
+    const handleRef = (node) => {
+        editorRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+            return;
+        }
+        if (ref) {
+            ref.current = node;
+        }
+    };
+    const getSelection = useCallback(() => selectionRef.current?.cloneRange() ?? null, []);
+    const controls = useMemo(() => getControls({
+        controlBtnProps,
+        addtionControls,
+        getSelection,
+    }), [addtionControls, getSelection]);
     return (jsxs("div", { className: classNames("i-editor", className, {
             "i-editor-borderless": !border,
         }), style: {
             ...style,
             [autosize ? "minHeight" : "height"]: height,
             width,
-        }, children: [controls !== "none" && (jsx("div", { className: 'i-editor-controls', children: getControls(controls, {
-                    controlBtnProps,
-                }) })), jsx("div", { ref: editorRef, className: 'i-editor-content', "data-placeholder": placeholder, contentEditable: true, onPaste: handlePaste, onInput: handleInput, onKeyDown: handleKeyDown, ...restProps })] }));
+        }, children: [!hideControl && (jsx("div", { className: "i-editor-controls", children: controls })), memtion && (jsx(Memtion$1, { visible: memtionVisible, rect: memtionRect, options: memtionOptions, activeIndex: memtionActiveIndex, onActiveChange: setMemtionActiveIndex, onSelect: insertMemtion })), jsx("div", { ref: handleRef, className: "i-editor-content", "data-placeholder": placeholder, contentEditable: mode === "plaintext" ? "plaintext-only" : true, onFocus: handleFocus, onBlur: handleBlur, onMouseUp: handleMouseUp, onPaste: handlePaste, onInput: handleInput, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, ...restProps })] }));
 };
 
 const Flex = (props) => {
@@ -2405,7 +2727,7 @@ const HookModal = (props) => {
         },
         close: () => {
             state.visible = false;
-            if (mergedProps.closable)
+            if (mergedProps.closable ?? true)
                 return;
             Promise.resolve().then(() => {
                 state.visible = true;
@@ -2952,27 +3274,34 @@ function List(props) {
     if (!files.length)
         return "";
     return (jsx(Flex, { className: 'i-image-list', gap: gap, columns: columns, wrap: wrap, direction: direction, children: files.map((img, i) => {
-            return (jsx(Image, { src: img.src, usePreview: false, onClick: (e) => handleClick(e, i), ...restProps }, i));
+            return (jsx(MemoImage, { src: img.src, usePreview: false, onClick: (e) => handleClick(e, i), ...restProps }, i));
         }) }));
 }
 
+const STATUS_LOADING = "loading";
+const STATUS_ERROR = "error";
 const Image = (props) => {
     const { src, thumb, round, size, height, width, ratio, initSize, lazyload, fallback, fit, style, className, cover, coverClass, usePreview: previewable, onLoad, onError, onClick, ...restProps } = props;
     const state = useReactive({
-        status: "loading",
+        status: STATUS_LOADING,
     });
     const ref = useRef(null);
     const { observe, unobserve } = useIntersectionObserver();
     const preview = usePreview();
-    const handleError = (err) => {
+    const setStatus = useCallback((status) => {
+        if (state.status === status)
+            return;
+        state.status = status;
+    }, [state]);
+    const handleError = useCallback((err) => {
         onError?.(err);
-        state.status = "error";
-    };
-    const handleLoad = (e) => {
+        setStatus(STATUS_ERROR);
+    }, [onError, setStatus]);
+    const handleLoad = useCallback((e) => {
         onLoad?.(e);
-        state.status = undefined;
-    };
-    const handleClick = (e) => {
+        setStatus(undefined);
+    }, [onLoad, setStatus]);
+    const handleClick = useCallback((e) => {
         onClick?.(e);
         if (!previewable || !src)
             return;
@@ -2986,44 +3315,53 @@ const Image = (props) => {
                 },
             ],
         });
-    };
+    }, [onClick, preview, previewable, src]);
     useEffect(() => {
         if (!src || typeof window === "undefined")
             return;
         const img = ref.current;
+        if (!img)
+            return;
         const hasSrcAttr = img?.getAttribute("src");
         const canSyncStatus = Boolean(img && (!lazyload || hasSrcAttr));
-        if (canSyncStatus && img?.complete) {
-            state.status = img.naturalWidth > 0 ? undefined : "error";
+        if (canSyncStatus && img.complete) {
+            setStatus(img.naturalWidth > 0 ? undefined : STATUS_ERROR);
         }
-        if (!ref.current?.complete && observe && lazyload) {
-            state.status = "loading";
+        if (!img.complete && observe && lazyload) {
+            setStatus(STATUS_LOADING);
         }
-        if (!lazyload || !ref.current || !observe)
+        if (!lazyload || !observe)
             return;
-        observe(ref.current, (tar, visible) => {
+        observe(img, (tar, visible) => {
             if (!visible)
                 return;
             tar.setAttribute("src", tar.dataset.src || "");
             unobserve(tar);
         });
         return () => {
-            ref.current && unobserve(ref.current);
+            unobserve(img);
         };
-    }, [src]);
-    restProps[lazyload ? "data-src" : "src"] = thumb ?? src;
-    const iSize = state.status === "loading" ? initSize : undefined;
-    return (jsx("div", { style: {
-            width: width ?? size ?? iSize,
-            height: height ?? size ?? iSize,
-            aspectRatio: ratio,
-            ...style,
-        }, className: classNames("i-image", className, {
-            rounded: round,
-            [`i-image-${state.status}`]: state.status,
-        }), onClick: handleClick, children: state.status === "error" ? ((fallback ?? null)) : (jsxs(Fragment, { children: [src && (jsx("img", { ref: ref, style: { objectFit: fit }, ...restProps, onLoad: handleLoad, onError: handleError })), src && state.status === "loading" && jsx(Loading, { absolute: true }), cover && (jsx("div", { className: classNames("i-image-cover", coverClass), children: cover }))] })) }));
+    }, [lazyload, observe, setStatus, src, unobserve]);
+    const imageStatus = state.status;
+    const iSize = imageStatus === STATUS_LOADING ? initSize : undefined;
+    const wrapperStyle = useMemo(() => ({
+        width: width ?? size ?? iSize,
+        height: height ?? size ?? iSize,
+        aspectRatio: ratio,
+        ...style,
+    }), [height, iSize, ratio, size, style, width]);
+    const wrapperClassName = useMemo(() => classNames("i-image", className, {
+        rounded: round,
+        [`i-image-${imageStatus}`]: imageStatus,
+    }), [className, imageStatus, round]);
+    const imageStyle = useMemo(() => ({ objectFit: fit }), [fit]);
+    const imageSrcProps = lazyload
+        ? { "data-src": thumb ?? src }
+        : { src: thumb ?? src };
+    return (jsx("div", { style: wrapperStyle, className: wrapperClassName, onClick: handleClick, children: imageStatus === STATUS_ERROR ? ((fallback ?? null)) : (jsxs(Fragment, { children: [src && (jsx("img", { ref: ref, style: imageStyle, ...imageSrcProps, ...restProps, onLoad: handleLoad, onError: handleError })), src && imageStatus === STATUS_LOADING && (jsx(Loading, { absolute: true })), cover && (jsx("div", { className: classNames("i-image-cover", coverClass), children: cover }))] })) }));
 };
-Image.List = List;
+const MemoImage = memo(Image);
+MemoImage.List = List;
 
 function InputContainer(props) {
     const { as: As = "label", label, className, labelInline, style, children, status, tip, required, } = props;
@@ -3199,16 +3537,19 @@ const Range = (props) => {
 };
 
 const Textarea = (props) => {
-    const { ref, label, name, value = "", labelInline, className, status = "normal", message, tip, autoSize, border, width, style, onChange, onEnter, ...restProps } = props;
+    const { ref, label, name, value = "", labelInline, className, status = "normal", message, tip, autoSize, border, width, style, resize, onChange, onEnter, ...restProps } = props;
     const [textareaValue, setTextareaValue] = useState(value);
     const refTextarea = useRef(null);
+    const syncTextareaHeight = () => {
+        const ta = refTextarea.current;
+        if (!autoSize || !ta)
+            return;
+        ta.style.height = "auto";
+        ta.style.height = `${ta.scrollHeight}px`;
+    };
     const handleChange = (e) => {
         const v = e.target.value;
         setTextareaValue(v);
-        const ta = refTextarea.current;
-        if (autoSize && ta) {
-            ta.style.height = `${ta.scrollHeight}px`;
-        }
         onChange?.(v, e);
     };
     const handleKeydown = (e) => {
@@ -3220,6 +3561,9 @@ const Textarea = (props) => {
     useEffect(() => {
         setTextareaValue(value);
     }, [value]);
+    useEffect(() => {
+        syncTextareaHeight();
+    }, [autoSize, textareaValue]);
     useImperativeHandle(ref, () => {
         return {
             input: refTextarea.current,
@@ -3230,6 +3574,7 @@ const Textarea = (props) => {
         name,
         value: textareaValue,
         className: "i-input i-textarea",
+        style: resize === false ? { resize: "none" } : undefined,
         onChange: handleChange,
         onKeyDown: handleKeydown,
         ...restProps,
@@ -3687,7 +4032,7 @@ function Footer(props) {
         setInputValue(value);
         setColorType(type);
     }, [value, type]);
-    return (jsxs("div", { className: 'i-colorpicker-footer', children: [jsx(Select, { readOnly: true, hideClear: true, hideArrow: true, style: { width: "5.6em" }, options: ["RGB", "HEX", "HSB"], value: colorType, onChange: handleTypeChange }), jsx(Input, { placeholder: 'color', value: inputValue, onChange: handleChange }), jsx(Button, { square: true, onClick: onOk, children: jsx(Icon, { icon: jsx(CheckRound, {}) }) })] }));
+    return (jsxs("div", { className: "i-colorpicker-footer", children: [jsx(Select, { readOnly: true, hideClear: true, hideArrow: true, style: { width: "5.6em" }, options: ["RGB", "HEX", "HSB"], value: colorType, onChange: handleTypeChange, popupProps: { fitSize: false } }), jsx(Input, { placeholder: "color", value: inputValue, onChange: handleChange }), jsx(Button, { square: true, onClick: onOk, children: jsx(Icon, { icon: jsx(CheckRound, {}) }) })] }));
 }
 
 const Handle = (props) => {
@@ -4029,10 +4374,10 @@ const defaultOk = {
 };
 const defaultCancel = {
     children: "取消",
-    secondary: true,
+    flat: true,
 };
 const Popconfirm = (props) => {
-    const { trigger = "click", visible, icon = jsx(Icon, { icon: jsx(InfoOutlined, {}), className: 'error', size: '1.2em' }), content, okButtonProps, cancelButtonProps, children, align, position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
+    const { trigger = "click", visible, icon = jsx(Icon, { icon: jsx(InfoOutlined, {}), className: "error", size: "1.2em" }), content, okButtonProps, cancelButtonProps, children, align, position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
     const state = useReactive({
         loading: false,
         visible,
@@ -4063,7 +4408,7 @@ const Popconfirm = (props) => {
         await onClose?.();
         state.visible = false;
     };
-    const popconfirmContent = (jsxs("div", { className: 'i-popconfirm', children: [jsxs(Flex, { gap: '.5em', children: [icon, jsx("div", { className: 'i-popconfirm-content', children: content })] }), jsxs(Flex, { gap: 12, justify: 'flex-end', className: 'i-popconfirm-footer', children: [cancelButtonProps !== null && (jsx(Button, { ...cancel, onClick: handleCancel })), extra, okButtonProps !== null && (jsx(Button, { loading: state.loading, ...ok, onClick: handleOk }))] })] }));
+    const popconfirmContent = (jsxs("div", { className: "i-popconfirm", children: [jsxs(Flex, { gap: ".5em", children: [icon, jsx("div", { className: "i-popconfirm-content", children: content })] }), jsxs(Flex, { gap: 12, justify: "flex-end", className: "i-popconfirm-footer", children: [cancelButtonProps !== null && (jsx(Button, { ...cancel, onClick: handleCancel })), extra, okButtonProps !== null && (jsx(Button, { loading: state.loading, ...ok, onClick: handleOk }))] })] }));
     return (jsx(Popup, { content: popconfirmContent, ...restProps, trigger: trigger, visible: state.visible, align: align, offset: offset, position: position, onVisibleChange: handleVisibleChange, children: children }));
 };
 
@@ -4549,7 +4894,7 @@ const Item = (props) => {
 };
 
 const Tabs = ((props) => {
-    const { ref, active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, navsJustify = "start", bar = true, hideMore, barClass, renderMore = () => (jsx(Button, { flat: true, square: true, size: 'small', children: jsx(Icon, { icon: jsx(MoreHorizRound, {}) }) })), onTabChange, ...rest } = props;
+    const { ref, active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, navsJustify = "start", bar = true, hideMore, barClass, renderMore = () => (jsx(Button, { flat: true, square: true, size: "small", children: jsx(Icon, { icon: jsx(MoreHorizRound, {}) }) })), onTabChange, ...rest } = props;
     const navRefs = useRef([]);
     const barRef = useRef(null);
     const navsRef = useRef(null);
@@ -4559,10 +4904,15 @@ const Tabs = ((props) => {
     const [barStyle, setBarStyle] = useState({});
     const [cachedTabs, setCachedTabs] = useState([]);
     const [overflow, setOverflow] = useState(false);
-    const [moreTabs, setMoreTabs] = useState([]);
     const [tabs, setTabs] = useState([]);
     const { observe, unobserve } = useIntersectionObserver();
     const size = useSize(navsRef);
+    const tabsRef = useRef(tabs);
+    tabsRef.current = tabs;
+    const activeKeyRef = useRef(activeKey);
+    activeKeyRef.current = activeKey;
+    const prevActiveKeyRef = useRef(prevActiveKey);
+    prevActiveKeyRef.current = prevActiveKey;
     useEffect(() => {
         contentsRef.current.clear();
         if (!items) {
@@ -4599,10 +4949,11 @@ const Tabs = ((props) => {
         }));
     }, [children, items]);
     const add = (tab) => {
-        const tkey = String(tab.key ?? tabs.length);
-        const i = tabs.findIndex((t) => t.key === tkey);
+        const currentTabs = tabsRef.current;
+        const tkey = String(tab.key ?? currentTabs.length);
+        const i = currentTabs.findIndex((t) => t.key === tkey);
         if (i > -1) {
-            open(tabs[i].key ?? `${i}`);
+            open(currentTabs[i].key ?? `${i}`);
             return;
         }
         contentsRef.current.set(tkey, tab.content);
@@ -4611,20 +4962,34 @@ const Tabs = ((props) => {
         open(tkey);
     };
     const close = (key) => {
-        const i = tabs.findIndex((t) => t.key === key);
+        const currentTabs = tabsRef.current;
+        const i = currentTabs.findIndex((t) => t.key === key);
         if (i < 0)
             return;
         contentsRef.current.delete(key);
-        const nextTabs = [...tabs];
+        const nextTabs = [...currentTabs];
         nextTabs.splice(i, 1);
         setTabs(nextTabs);
-        if (activeKey !== key)
+        if (activeKeyRef.current !== key)
             return;
         const next = nextTabs[i] || nextTabs[i - 1];
-        open(prevActiveKey ?? next?.key ?? "");
+        const prev = prevActiveKeyRef.current;
+        const nextKey = prev && nextTabs.some((t) => t.key === prev) ? prev : next?.key;
+        open(nextKey ?? "");
     };
     const open = (key) => {
-        if (key === activeKey) {
+        const nextKey = key || undefined;
+        if (nextKey === undefined) {
+            onTabChange?.(undefined, activeKey);
+            setPrevActiveKey(activeKey);
+            setActiveKey(undefined);
+            setBarStyle({
+                height: 0,
+                width: 0,
+            });
+            return;
+        }
+        if (nextKey === activeKey) {
             if (!toggable)
                 return;
             onTabChange?.(undefined, key);
@@ -4636,38 +5001,75 @@ const Tabs = ((props) => {
             return;
         }
         setPrevActiveKey(activeKey);
-        onTabChange?.(key, activeKey);
-        setActiveKey(key);
+        onTabChange?.(nextKey, activeKey);
+        setActiveKey(nextKey);
+    };
+    const handleKeyAction = (e, action) => {
+        if (!["Enter", " "].includes(e.key))
+            return;
+        e.preventDefault();
+        action();
+    };
+    const scrollToTab = (key) => {
+        const index = tabsRef.current.findIndex((tab) => tab.key === key);
+        const nav = navRefs.current[index];
+        nav?.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "nearest",
+        });
+    };
+    const handleMoreTabClick = (key) => {
+        open(key);
+        scrollToTab(key);
     };
     useEffect(() => {
-        if (!size || hideMore || !observe)
+        if (!size || hideMore || !observe || !unobserve)
             return;
         const { scrollHeight, scrollWidth } = navsRef.current;
         const { width, height } = size;
         const nextOverflow = scrollHeight > height || scrollWidth > width;
-        setOverflow(nextOverflow);
-        if (!nextOverflow)
+        setOverflow((v) => (v === nextOverflow ? v : nextOverflow));
+        if (!nextOverflow) {
+            setTabs((ts) => {
+                let changed = false;
+                const next = ts.map((t) => {
+                    if (t.intersecting === undefined ||
+                        t.intersecting === true) {
+                        return t;
+                    }
+                    changed = true;
+                    return { ...t, intersecting: true };
+                });
+                return changed ? next : ts;
+            });
             return;
+        }
+        const observed = [];
         navRefs.current.map((nav, i) => {
             if (!nav)
                 return;
-            observe(nav, (tar, visible) => {
+            observed.push(nav);
+            observe(nav, (_tar, visible) => {
                 setTabs((ts) => {
                     if (!ts[i])
                         return ts;
-                    const nextTabs = ts.map((t, idx) => idx === i ? { ...t, intersecting: visible } : t);
-                    setMoreTabs(nextTabs.filter((tab) => !tab.intersecting));
-                    return nextTabs;
+                    if (ts[i]?.intersecting === visible)
+                        return ts;
+                    return ts.map((t, idx) => idx === i ? { ...t, intersecting: visible } : t);
                 });
             });
         });
-    }, [size, hideMore, tabs.length, observe]);
+        return () => {
+            observed.map((el) => unobserve(el));
+        };
+    }, [size, hideMore, tabs.length, observe, unobserve]);
     useEffect(() => {
         if (!bar || type === "pane" || activeKey === undefined) {
             return;
         }
         const index = tabs.findIndex((tab) => tab.key === activeKey);
-        setTimeout(() => {
+        const timer = window.setTimeout(() => {
             const nav = navRefs.current[index];
             if (!nav)
                 return;
@@ -4686,19 +5088,15 @@ const Tabs = ((props) => {
                 transform: `translate(${offsetLeft}px, ${offsetTop}px)`,
             });
         }, 16);
+        return () => {
+            window.clearTimeout(timer);
+        };
     }, [activeKey, bar, size, tabs, type, vertical]);
     useEffect(() => {
         if (active === undefined || activeKey === active)
             return;
         open(active);
     }, [active]);
-    useEffect(() => {
-        if (hideMore || !unobserve)
-            return;
-        return () => {
-            navRefs.current?.map(unobserve);
-        };
-    }, [tabs.length, hideMore, unobserve]);
     useEffect(() => {
         if (!navsRef.current || vertical)
             return;
@@ -4719,30 +5117,35 @@ const Tabs = ((props) => {
                 return;
             navsRef.current.removeEventListener("wheel", handleMouseWheel);
         };
-    }, [navsRef.current]);
+    }, [vertical]);
     useImperativeHandle(ref, () => ({
         open,
         close,
         add,
         navs: navsRef,
     }));
+    const moreTabs = !hideMore && overflow
+        ? tabs.filter((tab) => tab.intersecting === false)
+        : [];
     return (jsxs("div", { className: classNames("i-tabs", { flex: vertical, [`i-tabs-${type}`]: type !== "default" }, className), ...rest, children: [jsxs("div", { className: classNames("i-tab-navs-container", {
                     "i-tab-navs-vertical": vertical,
-                }), children: [prepend, jsxs("div", { ref: navsRef, className: classNames("i-tab-navs", `justify-${navsJustify}`), children: [tabs.map((tab, i) => {
+                }), children: [prepend, jsxs("div", { ref: navsRef, className: classNames("i-tab-navs", `justify-${navsJustify}`), role: "tablist", "aria-orientation": vertical ? "vertical" : "horizontal", children: [tabs.map((tab, i) => {
                                 const { title, key = `${i}`, closable } = tab;
+                                const isActive = activeKey === key;
                                 return (jsxs("a", { ref: (ref) => (navRefs.current[i] = ref), className: classNames("i-tab-nav", {
-                                        "i-tab-active": activeKey === key,
-                                    }), onClick: () => open(key), children: [title, closable && (jsx(Helpericon, { as: 'i', active: true, className: 'i-tab-nav-close', onClick: (e) => {
+                                        "i-tab-active": isActive,
+                                    }), role: "tab", tabIndex: isActive ? 0 : -1, "aria-selected": isActive, onClick: () => open(key), onKeyDown: (e) => handleKeyAction(e, () => open(key)), children: [title, closable && (jsx(Helpericon, { as: "i", active: true, className: "i-tab-nav-close", role: "button", tabIndex: 0, "aria-label": "\u5173\u95ED\u6807\u7B7E\u9875", onClick: (e) => {
+                                                e.preventDefault();
                                                 e.stopPropagation();
                                                 close(key);
-                                            } }))] }, key));
-                            }), bar && (jsx("span", { ref: barRef, className: classNames("i-tab-navs-bar", barClass), style: barStyle }))] }), !hideMore && overflow && moreTabs.length > 0 && (jsx(Popup, { arrow: false, position: vertical ? "right" : "bottom", align: 'end', touchable: true, hideDelay: 500, content: jsx("div", { className: 'i-tabs-morelist pd-4', children: moreTabs.map((tab, i) => {
+                                            }, onKeyDown: (e) => handleKeyAction(e, () => close(key)) }))] }, key));
+                            }), bar && (jsx("span", { ref: barRef, className: classNames("i-tab-navs-bar", barClass), style: barStyle }))] }), !hideMore && overflow && moreTabs.length > 0 && (jsx(Popup, { arrow: false, position: vertical ? "right" : "bottom", align: "end", touchable: true, hideDelay: 500, content: jsx("div", { className: "i-tabs-morelist pd-4", children: moreTabs.map((tab, i) => {
                                 const { key = `${i}`, title } = tab;
                                 const isActive = activeKey === key;
                                 return (jsx("a", { className: classNames("i-tab-nav", {
                                         "i-tab-active": isActive,
-                                    }), onClick: () => open(key), children: title }, key));
-                            }) }), children: renderMore(moreTabs) })), append] }), jsx("div", { className: 'i-tab-contents', children: tabs.map((tab, i) => {
+                                    }), role: "button", tabIndex: 0, onClick: () => handleMoreTabClick(key), onKeyDown: (e) => handleKeyAction(e, () => handleMoreTabClick(key)), children: title }, key));
+                            }) }), children: renderMore(moreTabs) })), append] }), jsx("div", { className: "i-tab-contents", children: tabs.map((tab, i) => {
                     const key = tab.key ?? `${i}`;
                     const content = contentsRef.current.get(key);
                     const isActive = activeKey === key;
@@ -4750,7 +5153,7 @@ const Tabs = ((props) => {
                         (key !== undefined && cachedTabs.includes(key));
                     return (show && (jsx("div", { className: classNames("i-tab-content", {
                             "i-tab-active": isActive,
-                        }), children: content }, key)));
+                        }), role: "tabpanel", "aria-hidden": !isActive, children: content }, key)));
                 }) })] }));
 });
 Tabs.Item = Item;
@@ -4976,7 +5379,7 @@ const FileListItem = (props) => {
             let node = jsx(Fragment, {});
             switch (type) {
                 case TFileType.IMAGE:
-                    node = (jsx(Image, { lazyload: true, src: url || src, fit: 'cover', onMouseDown: (e) => e.preventDefault() }));
+                    node = (jsx(MemoImage, { lazyload: true, src: url || src, fit: 'cover', onMouseDown: (e) => e.preventDefault() }));
                     break;
                 case TFileType.VIDEO:
                     node = jsx("video", { src: url || src, preload: 'none' });
@@ -5241,4 +5644,4 @@ const useTheme = (props) => {
     };
 };
 
-export { Affix, Badge, Button, Card, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, Image, Input, List$1 as List, Loading, message as Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Resizable, River, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };
+export { Affix, Badge, Button, Card, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, MemoImage as Image, Input, List$1 as List, Loading, message as Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Resizable, River, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };