@ioca/react 1.5.5 → 1.5.7

package/lib/index.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { debounce, uid, throttle, title } from 'radash';
 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 { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, 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';
@@ -1867,57 +1867,67 @@ const xssOptions = {
 const handleMouseDown = (e) => {
     e.preventDefault();
 };
-const fnMap = {
-    bold: {
-        icon: jsx(FormatBoldRound, {}),
-        onClick: () => exec("bold"),
-    },
-    italic: {
-        icon: jsx(FormatItalicRound, {}),
-        onClick: () => exec("italic"),
-    },
-    underline: {
+const defaultControls = [
+    { key: "undo", icon: jsx(UndoRound, {}), onClick: () => exec("undo") },
+    { key: "redo", icon: jsx(RedoRound, {}), onClick: () => exec("redo") },
+    { key: "bold", icon: jsx(FormatBoldRound, {}), onClick: () => exec("bold") },
+    { key: "italic", icon: jsx(FormatItalicRound, {}), onClick: () => exec("italic") },
+    {
+        key: "underline",
         icon: jsx(FormatUnderlinedRound, {}),
         onClick: () => exec("underline"),
     },
-    strike: {
+    {
+        key: "strike",
         icon: jsx(StrikethroughSRound, {}),
         onClick: () => exec("strikeThrough"),
     },
-    redo: {
-        icon: jsx(RedoRound, {}),
-        onClick: () => exec("redo"),
-    },
-    undo: {
-        icon: jsx(UndoRound, {}),
-        onClick: () => exec("undo"),
-    },
-    clear: {
+    {
+        key: "clear",
         icon: jsx(ClearAllRound, {}),
         onClick: () => exec("removeFormat"),
     },
-};
-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 controls = defaultControls.map(({ key, icon, onClick }) => (jsx(Button, { ...controlBtnProps, onMouseDown: handleMouseDown, onClick: onClick, children: jsx(Icon, { icon: icon }) }, key)));
     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 blockTags = new Set([
+    "ADDRESS",
+    "ARTICLE",
+    "ASIDE",
+    "BLOCKQUOTE",
+    "DIV",
+    "DL",
+    "FIELDSET",
+    "FIGCAPTION",
+    "FIGURE",
+    "FOOTER",
+    "FORM",
+    "H1",
+    "H2",
+    "H3",
+    "H4",
+    "H5",
+    "H6",
+    "HEADER",
+    "LI",
+    "MAIN",
+    "NAV",
+    "OL",
+    "P",
+    "PRE",
+    "SECTION",
+    "TABLE",
+    "TD",
+    "TH",
+    "TR",
+    "UL",
+]);
 const escapeHtmlAttr = (value) => value
     .replaceAll("&", "&")
     .replaceAll('"', """)
@@ -1968,14 +1978,11 @@ const insertMemtionOption = ({ editor, range, mode, memtion, option, sanitizeVal
         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();
@@ -2005,6 +2012,60 @@ const filterMemtionOptions = (options, keyword) => {
 };
 const isMemtionTag = (node) => node instanceof HTMLElement &&
     node.classList.contains(MEMTION_TAG_CLASS_NAME);
+const appendBreak = (container) => {
+    if (!container.lastChild || container.lastChild.nodeName === "BR") {
+        return;
+    }
+    container.appendChild(document.createElement("br"));
+};
+const appendPlaintextOnMemtionNode = (container, node) => {
+    if (!node)
+        return;
+    if (node.nodeType === Node.TEXT_NODE) {
+        container.appendChild(document.createTextNode((node.textContent ?? "").replaceAll("\r", "")));
+        return;
+    }
+    if (!(node instanceof HTMLElement)) {
+        return;
+    }
+    if (isMemtionTag(node)) {
+        const tag = document.createElement("span");
+        const memtionValue = node.getAttribute("data-memtion-value");
+        tag.className = MEMTION_TAG_CLASS_NAME;
+        tag.setAttribute("contenteditable", "false");
+        if (memtionValue !== null) {
+            tag.setAttribute("data-memtion-value", memtionValue);
+        }
+        tag.innerHTML = node.innerHTML;
+        container.appendChild(tag);
+        return;
+    }
+    if (node.tagName === "BR") {
+        appendBreak(container);
+        return;
+    }
+    Array.from(node.childNodes).forEach((child) => {
+        appendPlaintextOnMemtionNode(container, child);
+    });
+    if (blockTags.has(node.tagName)) {
+        appendBreak(container);
+    }
+};
+const sanitizePlaintextOnMemtionHtml = (value) => {
+    if (typeof document === "undefined") {
+        return value;
+    }
+    const source = document.createElement("div");
+    const result = document.createElement("div");
+    source.innerHTML = value;
+    Array.from(source.childNodes).forEach((child) => {
+        appendPlaintextOnMemtionNode(result, child);
+    });
+    while (result.lastChild?.nodeName === "BR") {
+        result.lastChild.remove();
+    }
+    return result.innerHTML;
+};
 const getAdjacentMemtionTag = (range, direction) => {
     const { startContainer, startOffset } = range;
     if (startContainer.nodeType === Node.TEXT_NODE) {
@@ -2062,11 +2123,15 @@ const Memtion = (props) => {
     if (!visible || !rect || !options?.length) {
         return null;
     }
-    return (jsx(List$1, { className: "i-editor-memtion", type: "option", style: {
+    const content = (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}`))) }));
+    if (typeof document === "undefined") {
+        return content;
+    }
+    return createPortal(content, document.body);
 };
 var Memtion$1 = memo(Memtion);
 
@@ -2081,18 +2146,28 @@ const Editor = (props) => {
     const selectionRef = useRef(null);
     const memtionTriggerRangeRef = useRef(null);
     const pendingMemtionRef = useRef(false);
+    const isPlaintextMode = mode === "plaintext";
+    const isRichMode = mode === "rich";
+    const isPlaintextOnMemtionMode = mode === "plaintextOnMemtion";
     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") {
+        if (isPlaintextMode) {
             return nextValue === "\n" ? "" : nextValue;
         }
-        const safeHtml = xss(nextValue, xssOptions);
+        const safeHtml = isPlaintextOnMemtionMode
+            ? sanitizePlaintextOnMemtionHtml(xss(nextValue, xssOptions))
+            : xss(nextValue, xssOptions);
         return safeHtml === "<br>" ? "" : safeHtml;
     };
+    const syncHeight = () => {
+        if (autosize && editorRef.current) {
+            editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;
+        }
+    };
     const rememberSelection = () => {
         if (!editorRef.current)
             return;
@@ -2112,18 +2187,18 @@ const Editor = (props) => {
         if (!editorRef.current)
             return;
         const safeValue = sanitizeValue(nextValue);
-        if (mode === "plaintext") {
+        if (isPlaintextMode) {
             editorRef.current.textContent = safeValue;
             return;
         }
         editorRef.current.innerHTML = safeValue;
     };
     const getEditorValue = (sanitize = false) => {
-        if (!editorRef.current)
-            return "";
-        const nextValue = mode === "plaintext"
-            ? (editorRef.current.textContent ?? "")
-            : editorRef.current.innerHTML;
+        const nextValue = !editorRef.current
+            ? ""
+            : isPlaintextMode
+                ? (editorRef.current.textContent ?? "")
+                : editorRef.current.innerHTML;
         return sanitize ? sanitizeValue(nextValue) : nextValue;
     };
     const hideMemtion = () => {
@@ -2155,22 +2230,18 @@ const Editor = (props) => {
         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 pasteValue = isPlaintextMode
+            ? text
+            : html
+                ? sanitizeValue(html)
+                : text;
+        exec(isPlaintextMode ? "insertText" : "insertHTML", false, pasteValue);
     };
     const handleKeyDown = (e) => {
         onKeyDown?.(e);
-        if (mode === "rich" &&
+        if (!isPlaintextMode &&
             (e.key === "Backspace" || e.key === "Delete") &&
             removeAdjacentMemtionTag(editorRef.current, e.key)) {
             e.preventDefault();
@@ -2207,7 +2278,7 @@ const Editor = (props) => {
         switch (e.key) {
             case "Tab":
                 e.preventDefault();
-                exec(mode === "plaintext" ? "insertText" : "insertHTML", false, mode === "plaintext" ? "\t" : "&#09;");
+                exec(isRichMode ? "insertHTML" : "insertText", false, isRichMode ? "&#09;" : "\t");
                 break;
             case "Enter":
                 if (!onEnter)
@@ -2224,9 +2295,7 @@ const Editor = (props) => {
         if (getEditorValue(true) === nextValue)
             return;
         setEditorValue(nextValue);
-        if (autosize) {
-            editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;
-        }
+        syncHeight();
     }, [autosize, mode, value]);
     useEffect(() => {
         if (!memtionOptions.length) {
@@ -2238,6 +2307,11 @@ const Editor = (props) => {
     const handleInput = (e) => {
         const rawValue = getEditorValue();
         let nextValue = sanitizeValue(rawValue);
+        if (isPlaintextOnMemtionMode &&
+            rawValue !== nextValue &&
+            editorRef.current) {
+            setEditorValue(nextValue);
+        }
         if (!nextValue && rawValue && editorRef.current) {
             nextValue = "";
             setEditorValue(nextValue);
@@ -2258,9 +2332,7 @@ const Editor = (props) => {
                 setMemtionVisible(true);
             }
         }
-        if (autosize && editorRef.current) {
-            editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;
-        }
+        syncHeight();
         onChange?.(nextValue, e);
     };
     const handleFocus = (e) => {
@@ -2301,7 +2373,7 @@ const Editor = (props) => {
             ...style,
             [autosize ? "minHeight" : "height"]: height,
             width,
-        }, 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 })] }));
+        }, 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: isPlaintextMode ? "plaintext-only" : true, onFocus: handleFocus, onBlur: handleBlur, onMouseUp: handleMouseUp, onPaste: handlePaste, onInput: handleInput, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, ...restProps })] }));
 };
 
 const Flex = (props) => {
@@ -3939,7 +4011,7 @@ const displayValue = (config) => {
 };
 
 const Select = (props) => {
-    const { ref, type = "text", name, label, value = "", placeholder, options = [], multiple, prepend, append, labelInline, style, className, message, status = "normal", hideClear, hideArrow, maxDisplay, border, filter, tip, filterPlaceholder = "...", popupProps, onSelect, onChange, ...restProps } = props;
+    const { ref, type = "text", name, label, value = "", placeholder, required, options = [], multiple, prepend, append, labelInline, style, className, message, status = "normal", hideClear, hideArrow, maxDisplay, border, filter, tip, filterPlaceholder = "...", popupProps, onSelect, onChange, ...restProps } = props;
     const [filterValue, setFilterValue] = useState("");
     const [selectedValue, setSelectedValue] = useState(value);
     const [active, setActive] = useState(false);
@@ -4006,11 +4078,11 @@ const Select = (props) => {
     const text = message ?? tip;
     return (jsxs("label", { className: classNames("i-input-label", className, {
             "i-input-inline": labelInline,
-        }), style: style, children: [label && jsx("span", { className: 'i-input-label-text', children: label }), jsx(Popup, { position: 'bottom', arrow: false, fitSize: true, offset: 0, ...popupProps, visible: active, trigger: 'none', onVisibleChange: handleVisibleChange, content: jsx(Options, { options: filterOptions, value: selectedValue, multiple: multiple, filter: !!filter, filterPlaceholder: filterPlaceholder, onSelect: handleSelect, onFilter: handleFilterChange }), children: jsxs("div", { className: classNames("i-input-item", {
+        }), style: style, children: [label && (jsxs("span", { className: "i-input-label-text", children: [required && jsx("span", { className: "error", children: "*" }), label] })), jsx(Popup, { position: "bottom", arrow: false, fitSize: true, offset: 0, ...popupProps, visible: active, trigger: "none", onVisibleChange: handleVisibleChange, content: jsx(Options, { options: filterOptions, value: selectedValue, multiple: multiple, filter: !!filter, filterPlaceholder: filterPlaceholder, onSelect: handleSelect, onFilter: handleFilterChange }), children: jsxs("div", { className: classNames("i-input-item", {
                         [`i-input-${status}`]: status !== "normal",
                         "i-input-borderless": !border,
                         "i-input-focus": active,
-                    }), onClick: () => setActive(true), children: [prepend, jsx("input", { ref: ref, type: 'hidden', value: selectedValue, ...restProps }), multiple ? (hasValue ? (jsx("div", { className: classNames("i-input i-select", {
+                    }), onClick: () => setActive(true), children: [prepend, jsx("input", { ref: ref, type: "hidden", value: selectedValue, ...restProps }), multiple ? (hasValue ? (jsx("div", { className: classNames("i-input i-select", {
                                 "i-select-multiple": multiple,
                             }), children: displayValue({
                                 options: formattedOptions,
@@ -4018,7 +4090,7 @@ const Select = (props) => {
                                 multiple,
                                 maxDisplay,
                                 onSelect: handleSelect,
-                            }) })) : (jsx("input", { className: 'i-input i-select', placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsx("input", { value: active ? filterValue : displayLabel, className: 'i-input i-select', placeholder: displayLabel || placeholder, onChange: handleInputChange, readOnly: !filter })), jsx(Helpericon, { active: !hideArrow, icon: clearable ? undefined : jsx(UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsx("span", { className: 'i-input-message', children: text })] }));
+                            }) })) : (jsx("input", { className: "i-input i-select", placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsx("input", { value: active ? filterValue : displayLabel, className: "i-input i-select", placeholder: displayLabel || placeholder, onChange: handleInputChange, readOnly: !filter })), jsx(Helpericon, { active: !hideArrow, icon: clearable ? undefined : jsx(UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsx("span", { className: "i-input-message", children: text })] }));
 };
 
 const ColorMethods = {
@@ -4051,7 +4123,7 @@ const Handle = (props) => {
 };
 
 function ColorPicker(props) {
-    const { value, type = "HEX", disabledAlpha, children, usePanel, handle = "both", placeholder = "Colors", popupProps, onChange, } = props;
+    const { value, type = "HEX", disabledAlpha, children, usePanel, handle = "both", placeholder = "Colors", popupProps, onChange, label, required, ...restProps } = props;
     const [colorType, setColorType] = useState(type);
     const [colorValue, setColorValue] = useState(value);
     const [syncValue, setSyncValue] = useState(value);
@@ -4093,11 +4165,11 @@ function ColorPicker(props) {
         }
     }, [popupProps?.visible]);
     if (usePanel) {
-        return jsx(ColorsPanel, { ...props });
+        return (jsx(InputContainer, { label: label, required: required, children: jsx(ColorsPanel, { ...restProps, value: value, onChange: onChange }) }));
     }
-    return (jsx(Popup, { trigger: 'click', touchable: true, position: 'bottom', ...popupProps, visible: visible, content: jsx(ColorsPanel, { value: syncValue, disabledAlpha: disabledAlpha, panelRender: (panel) => {
-                return (jsxs(Fragment, { children: [panel, jsx(Footer, { value: colorValue, type: colorType, onTypeChange: handleTypeChange, onChange: handleValueChange, onOk: handleOk })] }));
-            }, onChange: handleChange, onChangeComplete: handleComplete }), onVisibleChange: handleVisibleChange, children: children ?? (jsx(Handle, { color: value, handle: handle, placeholder: placeholder })) }));
+    return (jsx(InputContainer, { label: label, required: required, children: jsx(Popup, { trigger: "click", touchable: true, position: "bottom", ...popupProps, visible: visible, content: jsx(ColorsPanel, { ...restProps, value: syncValue, disabledAlpha: disabledAlpha, panelRender: (panel) => {
+                    return (jsxs(Fragment, { children: [panel, jsx(Footer, { value: colorValue, type: colorType, onTypeChange: handleTypeChange, onChange: handleValueChange, onOk: handleOk })] }));
+                }, onChange: handleChange, onChangeComplete: handleComplete }), onVisibleChange: handleVisibleChange, children: children ?? (jsx(Handle, { color: value, handle: handle, placeholder: placeholder })) }) }));
 }
 
 const Dates = (props) => {
@@ -4899,14 +4971,104 @@ const Swiper = ((props) => {
 });
 Swiper.Item = Item$1;
 
+const TabsContents = (props) => {
+    const { tabs, activeKey, cachedTabKeySet, getContent } = props;
+    return (jsx("div", { className: "i-tab-contents", children: tabs.map((tab, i) => {
+            const key = tab.key ?? `${i}`;
+            const content = getContent(key);
+            const isActive = activeKey === key;
+            const show = isActive || cachedTabKeySet.has(key);
+            return (show && (jsx("div", { className: classNames("i-tab-content", {
+                    "i-tab-active": isActive,
+                }), role: "tabpanel", "aria-hidden": !isActive, children: content }, key)));
+        }) }));
+};
+var TabsContents$1 = memo(TabsContents);
+
+const emptyBarStyle = {
+    height: 0,
+    width: 0,
+};
+const defaultRenderMore = () => (jsx(Button, { flat: true, square: true, size: "small", children: jsx(Icon, { icon: jsx(MoreHorizRound, {}) }) }));
+const isSameTabs = (prev, next) => prev.length === next.length &&
+    prev.every((tab, index) => {
+        const target = next[index];
+        return (tab.key === target.key &&
+            tab.title === target.title &&
+            tab.keepDOM === target.keepDOM &&
+            tab.closable === target.closable &&
+            tab.intersecting === target.intersecting);
+    });
+const getParsedTabs = (items, children) => {
+    const contents = new Map();
+    if (!items) {
+        const tabs = Children.map(children, (node, i) => {
+            const { key, props: nodeProps } = node;
+            const { title, children: tabChildren, content, keepDOM, closable, } = nodeProps;
+            const tabKey = String(key ?? i);
+            contents.set(tabKey, tabChildren ?? content);
+            return {
+                key: tabKey,
+                title,
+                keepDOM,
+                closable,
+            };
+        }) ?? [];
+        return {
+            tabs,
+            contents,
+            keys: new Set(tabs.map((tab) => String(tab.key))),
+        };
+    }
+    const tabs = items.map((item, i) => {
+        if (["string", "number"].includes(typeof item)) {
+            const key = String(item);
+            return { key, title: item };
+        }
+        const key = String(item.key ?? i);
+        contents.set(key, item.content);
+        const { content, ...rest } = item;
+        return {
+            ...rest,
+            key,
+        };
+    });
+    return {
+        tabs,
+        contents,
+        keys: new Set(tabs.map((tab) => String(tab.key))),
+    };
+};
+
 const Item = (props) => {
     return jsx(Fragment, {});
 };
 
+const TabsNavs = (props) => {
+    const { tabs, moreTabs, activeKey, vertical, overflow, hideMore, navsJustify = "start", bar, barClass, barStyle, navsRef, renderMore, setNavRef, onOpen, onClose, onMoreTabClick, onKeyAction, } = props;
+    return (jsxs(Fragment, { children: [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: (node) => setNavRef(i, node), className: classNames("i-tab-nav", {
+                                "i-tab-active": isActive,
+                            }), role: "tab", tabIndex: isActive ? 0 : -1, "aria-selected": isActive, onClick: () => onOpen(key), onKeyDown: (e) => onKeyAction(e, () => onOpen(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();
+                                        onClose(key);
+                                    }, onKeyDown: (e) => onKeyAction(e, () => onClose(key)) }))] }, key));
+                    }), bar && (jsx("span", { 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,
+                            }), role: "button", tabIndex: 0, onClick: () => onMoreTabClick(key), onKeyDown: (e) => onKeyAction(e, () => onMoreTabClick(key)), children: title }, key));
+                    }) }), children: renderMore(moreTabs) }))] }));
+};
+var TabsNavs$1 = memo(TabsNavs);
+
 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", navsClass, bar = true, hideMore, barClass, renderMore = defaultRenderMore, onTabChange, ...rest } = props;
     const navRefs = useRef([]);
-    const barRef = useRef(null);
     const navsRef = useRef(null);
     const contentsRef = useRef(new Map());
     const [activeKey, setActiveKey] = useState(active);
@@ -4923,42 +5085,36 @@ const Tabs = ((props) => {
     activeKeyRef.current = activeKey;
     const prevActiveKeyRef = useRef(prevActiveKey);
     prevActiveKeyRef.current = prevActiveKey;
+    const sourceKeysRef = useRef(new Set());
+    const hiddenSourceKeysRef = useRef(new Set());
+    const parsedTabs = useMemo(() => getParsedTabs(items, children), [children, items]);
     useEffect(() => {
-        contentsRef.current.clear();
-        if (!items) {
-            if (!children) {
-                setTabs([]);
-                return;
-            }
-            setTabs(Children.map(children, (node, i) => {
-                const { key, props: nodeProps } = node;
-                const { title, children: tabChildren, content, keepDOM, closable, } = nodeProps;
-                const tabKey = String(key ?? i);
-                contentsRef.current.set(tabKey, tabChildren ?? content);
-                return {
-                    key: tabKey,
-                    title,
-                    keepDOM,
-                    closable,
-                };
-            }) ?? []);
-            return;
-        }
-        setTabs(items.map((item, i) => {
-            if (["string", "number"].includes(typeof item)) {
-                const key = String(item);
-                return { key, title: item };
+        const prevContents = new Map(contentsRef.current);
+        const nextContents = new Map(parsedTabs.contents);
+        const sourceTabs = parsedTabs.tabs;
+        const sourceKeys = parsedTabs.keys;
+        hiddenSourceKeysRef.current.forEach((key) => {
+            if (!sourceKeys.has(key)) {
+                hiddenSourceKeysRef.current.delete(key);
             }
-            const key = String(item.key ?? i);
-            contentsRef.current.set(key, item.content);
-            const { content, ...rest } = item;
-            return {
-                ...rest,
-                key,
-            };
-        }));
-    }, [children, items]);
-    const add = (tab) => {
+        });
+        const dynamicTabs = tabsRef.current.filter((tab) => {
+            const key = String(tab.key);
+            return !sourceKeysRef.current.has(key) && !sourceKeys.has(key);
+        });
+        dynamicTabs.forEach((tab) => {
+            const key = String(tab.key);
+            nextContents.set(key, prevContents.get(key));
+        });
+        sourceKeysRef.current = sourceKeys;
+        contentsRef.current = nextContents;
+        const nextTabs = [
+            ...sourceTabs.filter((tab) => !hiddenSourceKeysRef.current.has(String(tab.key))),
+            ...dynamicTabs,
+        ];
+        setTabs((currentTabs) => isSameTabs(currentTabs, nextTabs) ? currentTabs : nextTabs);
+    }, [parsedTabs]);
+    const add = (tab, position) => {
         const currentTabs = tabsRef.current;
         const tkey = String(tab.key ?? currentTabs.length);
         const i = currentTabs.findIndex((t) => t.key === tkey);
@@ -4968,7 +5124,14 @@ const Tabs = ((props) => {
         }
         contentsRef.current.set(tkey, tab.content);
         const { content, ...rest } = tab;
-        setTabs((ts) => [...ts, { ...rest, key: tkey }]);
+        setTabs((ts) => {
+            const nextTabs = [...ts];
+            const index = position === undefined
+                ? nextTabs.length
+                : Math.max(0, Math.min(position, nextTabs.length));
+            nextTabs.splice(index, 0, { ...rest, key: tkey });
+            return nextTabs;
+        });
         open(tkey);
     };
     const close = (key) => {
@@ -4976,7 +5139,12 @@ const Tabs = ((props) => {
         const i = currentTabs.findIndex((t) => t.key === key);
         if (i < 0)
             return;
-        contentsRef.current.delete(key);
+        if (sourceKeysRef.current.has(key)) {
+            hiddenSourceKeysRef.current.add(key);
+        }
+        else {
+            contentsRef.current.delete(key);
+        }
         const nextTabs = [...currentTabs];
         nextTabs.splice(i, 1);
         setTabs(nextTabs);
@@ -4993,10 +5161,7 @@ const Tabs = ((props) => {
             onTabChange?.(undefined, activeKey);
             setPrevActiveKey(activeKey);
             setActiveKey(undefined);
-            setBarStyle({
-                height: 0,
-                width: 0,
-            });
+            setBarStyle(emptyBarStyle);
             return;
         }
         if (nextKey === activeKey) {
@@ -5004,10 +5169,7 @@ const Tabs = ((props) => {
                 return;
             onTabChange?.(undefined, key);
             setActiveKey(undefined);
-            setBarStyle({
-                height: 0,
-                width: 0,
-            });
+            setBarStyle(emptyBarStyle);
             return;
         }
         setPrevActiveKey(activeKey);
@@ -5033,6 +5195,10 @@ const Tabs = ((props) => {
         open(key);
         scrollToTab(key);
     };
+    const setNavRef = (index, node) => {
+        navRefs.current[index] = node;
+    };
+    const getContent = (key) => contentsRef.current.get(key);
     useEffect(() => {
         if (!size || hideMore || !observe || !unobserve)
             return;
@@ -5056,7 +5222,7 @@ const Tabs = ((props) => {
             return;
         }
         const observed = [];
-        navRefs.current.map((nav, i) => {
+        navRefs.current.forEach((nav, i) => {
             if (!nav)
                 return;
             observed.push(nav);
@@ -5071,7 +5237,7 @@ const Tabs = ((props) => {
             });
         });
         return () => {
-            observed.map((el) => unobserve(el));
+            observed.forEach((el) => unobserve(el));
         };
     }, [size, hideMore, tabs.length, observe, unobserve]);
     useEffect(() => {
@@ -5093,7 +5259,7 @@ const Tabs = ((props) => {
             const { offsetHeight, offsetLeft, offsetTop, offsetWidth } = nav;
             const isLine = type === "line";
             setBarStyle({
-                height: !vertical && isLine ? ".25em" : offsetHeight,
+                height: !vertical && isLine ? ".25em" : offsetHeight * 0.5,
                 width: vertical && isLine ? ".25em" : offsetWidth,
                 transform: `translate(${offsetLeft}px, ${offsetTop}px)`,
             });
@@ -5105,7 +5271,8 @@ const Tabs = ((props) => {
     useEffect(() => {
         if (active === undefined || activeKey === active)
             return;
-        open(active);
+        setPrevActiveKey(activeKey);
+        setActiveKey(active);
     }, [active]);
     useEffect(() => {
         if (!navsRef.current || vertical)
@@ -5134,37 +5301,13 @@ const Tabs = ((props) => {
         add,
         navs: navsRef,
     }));
-    const moreTabs = !hideMore && overflow
+    const cachedTabKeySet = useMemo(() => new Set(cachedTabs), [cachedTabs]);
+    const moreTabs = useMemo(() => !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", {
+        : [], [hideMore, overflow, tabs]);
+    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", navsClass, {
                     "i-tab-navs-vertical": vertical,
-                }), 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": 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);
-                                            }, 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,
-                                    }), 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;
-                    const show = isActive ||
-                        (key !== undefined && cachedTabs.includes(key));
-                    return (show && (jsx("div", { className: classNames("i-tab-content", {
-                            "i-tab-active": isActive,
-                        }), role: "tabpanel", "aria-hidden": !isActive, children: content }, key)));
-                }) })] }));
+                }), children: [prepend, jsx(TabsNavs$1, { tabs: tabs, moreTabs: moreTabs, activeKey: activeKey, vertical: vertical, overflow: overflow, hideMore: hideMore, navsJustify: navsJustify, bar: bar, barClass: barClass, barStyle: barStyle, navsRef: navsRef, renderMore: renderMore, setNavRef: setNavRef, onOpen: open, onClose: close, onMoreTabClick: handleMoreTabClick, onKeyAction: handleKeyAction }), append] }), jsx(TabsContents$1, { tabs: tabs, activeKey: activeKey, cachedTabKeySet: cachedTabKeySet, getContent: getContent })] }));
 });
 Tabs.Item = Item;