@ioca/react 1.4.74 → 1.4.76

package/lib/index.js

@@ -1,7 +1,7 @@
 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, createContext, useContext, useLayoutEffect, useImperativeHandle } from 'react';
+import { useState, useRef, useEffect, useMemo, Children, cloneElement, createElement, isValidElement, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, useImperativeHandle, createContext, useContext } 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';
@@ -132,9 +132,6 @@ function useKeydown(listener, options) {
         };
     }, []);
 }
-function useCreation(factory, deps) {
-    return useMemo(factory, deps);
-}
 function useReactive(initialState) {
     const [, setFlag] = useState(0);
     const scheduledRef = useRef(false);
@@ -428,25 +425,21 @@ function Group(props) {
 
 function Toggle(props) {
     const { ref, active, activeClass, after, disabled, children, className, toggable, onClick, onToggle, ...restProps } = props;
-    const state = useReactive({
-        active,
-        done: true,
-    });
+    const [isActive, setIsActive] = useState(active);
+    const [done, setDone] = useState(true);
     const toggle = async () => {
         const hasAfter = !!after;
-        const nextActive = !state.active;
+        const nextActive = !isActive;
         const canToggle = toggable ? await toggable() : true;
         if (!canToggle)
             return;
-        Object.assign(state, {
-            active: nextActive,
-            done: !hasAfter,
-        });
+        setIsActive(nextActive);
+        setDone(!hasAfter);
         onToggle?.(nextActive);
         if (!hasAfter)
             return;
         setTimeout(() => {
-            state.done = true;
+            setDone(true);
         }, 16);
     };
     const handleClick = (e) => {
@@ -454,14 +447,12 @@ function Toggle(props) {
         !disabled && toggle();
     };
     useEffect(() => {
-        Object.assign(state, {
-            active,
-            done: true,
-        });
+        setIsActive(active);
+        setDone(true);
     }, [active]);
-    return (jsx(Button, { ref: ref, className: classNames(className, { [activeClass || ""]: state.active }, "i-btn-toggle"), ...restProps, onClick: handleClick, children: jsx("div", { className: classNames("i-btn-toggle-content", {
-                "i-btn-toggle-active": state.done,
-            }), children: state.active ? (after ?? children) : children }) }));
+    return (jsx(Button, { ref: ref, className: classNames(className, { [activeClass || ""]: isActive }, "i-btn-toggle"), ...restProps, onClick: handleClick, children: jsx("div", { className: classNames("i-btn-toggle-content", {
+                "i-btn-toggle-active": done,
+            }), children: isActive ? (after ?? children) : children }) }));
 }
 
 const formatClass = ({ outline, flat, loading, disabled, size = "normal", block, round, square, secondary, className, }) => classNames("i-btn", className, {
@@ -894,41 +885,39 @@ const arrayMove = (array, fromIndex, toIndex) => {
 
 function CheckboxItem(props) {
     const { type = "default", label, name, value = false, className, status = "normal", message, disabled, partof, optionValue, children, onChange, ...restProps } = props;
-    const state = useReactive({
-        value,
-        status,
-        message,
-    });
+    const [checked, setChecked] = useState(value);
+    const [itemStatus, setItemStatus] = useState(status);
+    const [itemMessage, setItemMessage] = useState(message);
     const isChildrenFn = typeof children === "function";
     const handleChange = (e) => {
-        const checked = e.target.checked;
-        Object.assign(state, {
-            value: checked,
-            status,
-            message,
-        });
-        onChange?.(checked, e);
+        const next = e.target.checked;
+        setChecked(next);
+        setItemStatus(status);
+        setItemMessage(message);
+        onChange?.(next, e);
     };
     useEffect(() => {
-        state.value = value;
+        setChecked(value);
     }, [value]);
+    useEffect(() => {
+        setItemStatus(status);
+        setItemMessage(message);
+    }, [status, message]);
     return (jsxs("label", { className: classNames("i-checkbox-item", {
-            [`i-checkbox-${state.status}`]: state.status !== "normal",
+            [`i-checkbox-${itemStatus}`]: itemStatus !== "normal",
             disabled,
         }, className), ...restProps, children: [jsx("input", { type: 'checkbox', name: name, className: classNames("i-checkbox-input", {
                     [`i-checkbox-${type}`]: !partof,
                     "i-checkbox-partof": partof,
-                }), checked: state.value, disabled: disabled, onChange: handleChange }), isChildrenFn ? (children(state.value, optionValue)) : (jsx("span", { className: 'i-checkbox-text', children: children || label })), state.message && (jsxs("span", { className: 'i-checkbox-message', children: ["*", state.message] }))] }));
+                }), checked: checked, disabled: disabled, onChange: handleChange }), isChildrenFn ? (children(checked, optionValue)) : (jsx("span", { className: 'i-checkbox-text', children: children || label })), itemMessage && (jsxs("span", { className: 'i-checkbox-message', children: ["*", itemMessage] }))] }));
 }
 
 function Checkbox(props) {
     const { label, name, options = [], value = "", type = "default", optionInline = true, labelInline, disabled, status = "normal", message, required, className, renderItem, onChange, ...restProps } = props;
-    const state = useReactive({
-        value,
-    });
+    const [selectedValues, setSelectedValues] = useState(value);
     const formattedOptions = useMemo(() => formatOption(options), [options]);
     const handleChange = (checked, opt, e) => {
-        const group = [...state.value];
+        const group = [...selectedValues];
         const i = group.findIndex((item) => item === opt.value);
         if (checked && i < 0) {
             group.push(opt.value);
@@ -936,11 +925,11 @@ function Checkbox(props) {
         else if (!checked && i > -1) {
             group.splice(i, 1);
         }
-        state.value = group;
+        setSelectedValues(group);
         onChange?.(group, opt, e);
     };
     useEffect(() => {
-        state.value = value;
+        setSelectedValues(value);
     }, [value]);
     return (jsxs("div", { className: classNames("i-checkbox i-input-label", {
             [`i-checkbox-${status}`]: status !== "normal",
@@ -949,7 +938,7 @@ function Checkbox(props) {
                     "i-options-block": !optionInline,
                     "i-checkbox-options-button": type === "button",
                 }), children: formattedOptions.map((option) => {
-                    return (jsx(CheckboxItem, { name: name, value: state.value.includes(option.value), optionValue: option.value, type: type, disabled: disabled || option.disabled, onChange: (checked, e) => handleChange(checked, option, e), children: renderItem ?? option.label }, option.value));
+                    return (jsx(CheckboxItem, { name: name, value: selectedValues.includes(option.value), optionValue: option.value, type: type, disabled: disabled || option.disabled, onChange: (checked, e) => handleChange(checked, option, e), children: renderItem ?? option.label }, option.value));
                 }) })] }));
 }
 Checkbox.Item = CheckboxItem;
@@ -975,9 +964,7 @@ function Item$5(props) {
 
 const Collapse = (props) => {
     const { active, items, multiple, border, headerClickable, className, children, renderToggle = (active) => active ? jsx(MinusRound, {}) : jsx(PlusRound, {}), onCollapse, ...restProps } = props;
-    const state = useReactive({
-        active,
-    });
+    const [activeKey, setActiveKey] = useState(active);
     const collapses = useMemo(() => {
         if (!items) {
             if (!children)
@@ -1007,19 +994,20 @@ const Collapse = (props) => {
         if (disabled)
             return;
         if (!multiple) {
-            state.active = state.active === key ? undefined : key;
-            onCollapse?.(key, state.active !== undefined);
+            const nextActive = activeKey === key ? undefined : key;
+            setActiveKey(nextActive);
+            onCollapse?.(key, nextActive !== undefined);
             return;
         }
-        if (!Array.isArray(state.active))
-            state.active = [];
-        const i = state.active.findIndex((k) => k === key);
+        const group = Array.isArray(activeKey) ? [...activeKey] : [];
+        const i = group.findIndex((k) => k === key);
         if (i > -1) {
-            state.active.splice(i, 1);
+            group.splice(i, 1);
         }
         else {
-            key !== undefined && state.active.push(key);
+            key !== undefined && group.push(key);
         }
+        setActiveKey(group);
         onCollapse?.(key, i < 0);
     };
     return (jsx("div", { className: classNames("i-collapse", {
@@ -1027,8 +1015,8 @@ const Collapse = (props) => {
         }, className), ...restProps, children: collapses.map((item) => {
             const { key, title, content, disabled, className, ...restProps } = item;
             const isActive = multiple
-                ? (state.active || []).includes(key)
-                : state.active === key;
+                ? (activeKey || []).includes(key)
+                : activeKey === key;
             return (jsxs("div", { className: classNames("i-collapse-item", className, {
                     "i-collapse-active": isActive,
                     "i-collapse-disabled": disabled,
@@ -1337,16 +1325,10 @@ const List$1 = (props) => {
 };
 List$1.Item = Item$4;
 
-const ModalContext = createContext(false);
-
-const Content$2 = (props) => {
-    const { ref, getContainer = (trigger) => {
-        if (typeof document === "undefined")
-            return null;
-        return trigger?.offsetParent ?? document.body;
-    }, trigger, arrow, arrowProps = {}, className, children, ...restProps } = props;
+const Content$2 = forwardRef((props, ref) => {
+    const { arrow, arrowProps = {}, className, children, ...restProps } = props;
     const arrowCSS = useMemo(() => {
-        let { left, top, pos } = arrowProps;
+        let { left = 0, top = 0, pos } = arrowProps;
         let transform = "";
         switch (pos) {
             case "left":
@@ -1373,153 +1355,324 @@ const Content$2 = (props) => {
         };
     }, [arrowProps]);
     const content = (jsxs("div", { ref: ref, className: classNames("i-popup", className), ...restProps, children: [arrow && (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', className: 'i-popup-arrow', style: arrowCSS, children: jsx("path", { d: 'M0.5 0L1.5 0C1.5 4, 3 5.5, 5 7.5S8,10 8,12S7 14.5, 5 16.5S1.5,20 1.5,24L0.5 24L0.5 0z' }) })), children] }));
-    const container = getContainer(trigger);
+    const container = typeof document === "undefined" ? null : document.body;
     if (!container)
         return null;
     return createPortal(content, container);
-};
+});
 
 function Popup(props) {
-    const { visible = false, content, trigger = "hover", gap = 12, offset = 8, fixed, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align, fitSize, watchResize, clickOutside = true, disabled, style, className, getContainer, children, onVisibleChange, } = props;
+    const { visible = false, content, trigger = "hover", gap = 12, offset = 8, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align = "center", fitSize, disabled, style, className, children, onVisibleChange, } = props;
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
     const timerRef = useRef(null);
-    const statusRef = useRef("");
-    const isInModal = useContext(ModalContext);
-    const refWindow = isInModal || fixed;
-    const state = useReactive({
-        show: false,
-        style: { position: refWindow ? "fixed" : "absolute" },
-        arrowProps: {},
-    });
-    useMouseUp((e) => {
-        if (!triggerRef.current || !contentRef.current || !clickOutside)
-            return;
-        const tar = e.target;
-        const isContain = triggerRef.current.contains(tar) ||
-            contentRef.current.contains(tar);
-        if (!state.show || isContain)
-            return;
-        handleToggle(false);
+    const afterHideTimerRef = useRef(null);
+    const rafRef = useRef(null);
+    const [show, setShow] = useState(false);
+    const showRef = useRef(false);
+    showRef.current = show;
+    const latestRef = useRef({
+        disabled,
+        trigger,
+        touchable,
+        showDelay,
+        hideDelay,
+        position,
+        gap,
+        offset,
+        align,
+        fitSize,
+        onVisibleChange,
     });
+    latestRef.current = {
+        disabled,
+        trigger,
+        touchable,
+        showDelay,
+        hideDelay,
+        position,
+        gap,
+        offset,
+        align,
+        fitSize,
+        onVisibleChange,
+    };
+    const phaseRef = useRef("");
+    const lastPosRef = useRef(null);
+    const lastArrowRef = useRef(null);
+    const arrowElRef = useRef(null);
+    const pointRef = useRef(null);
     const clearTimer = () => {
         if (!timerRef.current)
             return;
         clearTimeout(timerRef.current);
         timerRef.current = null;
-        statusRef.current = "";
+        phaseRef.current = "";
+    };
+    const clearAllTimers = () => {
+        clearTimer();
+        if (afterHideTimerRef.current) {
+            clearTimeout(afterHideTimerRef.current);
+            afterHideTimerRef.current = null;
+        }
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+    };
+    const setContentVisible = (visible) => {
+        const el = contentRef.current;
+        if (!el)
+            return;
+        el.style.opacity = visible ? "1" : "0";
+        el.style.transform = visible ? "none" : "translate(0, 2px)";
+    };
+    const ensureBaseStyle = () => {
+        const el = contentRef.current;
+        if (!el)
+            return;
+        const pos = "fixed";
+        if (el.style.position !== pos)
+            el.style.position = pos;
+    };
+    const applyFitSize = () => {
+        const o = latestRef.current;
+        const triggerEl = triggerRef.current;
+        const contentEl = contentRef.current;
+        if (!triggerEl || !contentEl)
+            return;
+        const vertical = ["top", "bottom"].includes(o.position);
+        const key = vertical ? "width" : "height";
+        if (!o.fitSize) {
+            contentEl.style[key] = "";
+            return;
+        }
+        const size = triggerEl[vertical ? "offsetWidth" : "offsetHeight"];
+        contentEl.style[key] =
+            typeof size === "number" ? `${size}px` : "";
+    };
+    const applyArrow = (arrowX, arrowY, arrowPos) => {
+        const contentEl = contentRef.current;
+        if (!contentEl)
+            return;
+        const arrowEl = arrowElRef.current ??
+            contentEl.querySelector(".i-popup-arrow");
+        arrowElRef.current = arrowEl;
+        if (!arrowEl)
+            return;
+        let left = arrowX ?? 0;
+        let top = arrowY ?? 0;
+        let transform = "";
+        switch (arrowPos) {
+            case "left":
+                left += 2;
+                transform = `translate(-100%, -50%) rotate(180deg)`;
+                break;
+            case "right":
+                left -= 2;
+                transform = `translate(0, -50%)`;
+                break;
+            case "top":
+                top -= 2;
+                transform = `translate(-50%, -50%) rotate(-90deg)`;
+                break;
+            case "bottom":
+                top += 2;
+                transform = `translate(-50%, -50%) rotate(90deg)`;
+                break;
+        }
+        const prev = lastArrowRef.current;
+        if (prev &&
+            prev.left === left &&
+            prev.top === top &&
+            prev.transform === transform) {
+            return;
+        }
+        lastArrowRef.current = { left, top, transform };
+        arrowEl.style.left = `${left}px`;
+        arrowEl.style.top = `${top}px`;
+        arrowEl.style.transform = transform;
+    };
+    const applyLeftTop = (left, top) => {
+        const contentEl = contentRef.current;
+        if (!contentEl)
+            return;
+        const prev = lastPosRef.current;
+        if (prev && prev.left === left && prev.top === top)
+            return;
+        lastPosRef.current = { left, top };
+        contentEl.style.left = `${left}px`;
+        contentEl.style.top = `${top}px`;
+    };
+    const computeRelativePosition = () => {
+        const triggerEl = triggerRef.current;
+        const contentEl = contentRef.current;
+        if (!triggerEl || !contentEl)
+            return;
+        const o = latestRef.current;
+        applyFitSize();
+        const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerEl, contentEl, {
+            position: o.position,
+            gap: o.gap,
+            offset: o.offset,
+            align: o.align,
+            refWindow: true,
+        });
+        applyLeftTop(left, top);
+        applyArrow(arrowX, arrowY, arrowPos);
+    };
+    const computePointPosition = () => {
+        const contentEl = contentRef.current;
+        if (!contentEl)
+            return;
+        const point = pointRef.current;
+        if (!point)
+            return;
+        const [left, top] = getPointPosition(point, contentEl);
+        applyLeftTop(left, top);
+    };
+    const scheduleComputePosition = () => {
+        if (!showRef.current)
+            return;
+        if (rafRef.current !== null)
+            return;
+        rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = null;
+            if (!showRef.current)
+                return;
+            ensureBaseStyle();
+            if (latestRef.current.trigger === "contextmenu") {
+                computePointPosition();
+                return;
+            }
+            computeRelativePosition();
+        });
     };
     const handleShow = () => {
-        if (disabled)
+        const opts = latestRef.current;
+        if (opts.disabled)
             return;
-        if (state.show &&
-            (trigger !== "hover" || (trigger === "hover" && !touchable))) {
+        clearAllTimers();
+        if (showRef.current &&
+            (opts.trigger !== "hover" ||
+                (opts.trigger === "hover" && !opts.touchable))) {
+            ensureBaseStyle();
+            computeRelativePosition();
+            setContentVisible(true);
             return;
         }
-        statusRef.current = "showing";
-        state.show = true;
+        phaseRef.current = "showing";
+        if (!showRef.current) {
+            lastPosRef.current = null;
+            lastArrowRef.current = null;
+            arrowElRef.current = null;
+            setShow(true);
+        }
         timerRef.current = setTimeout(() => {
-            if (statusRef.current !== "showing")
+            if (phaseRef.current !== "showing")
                 return;
-            requestAnimationFrame(() => {
-                if (statusRef.current !== "showing")
+            rafRef.current = requestAnimationFrame(() => {
+                rafRef.current = null;
+                if (phaseRef.current !== "showing")
                     return;
-                const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerRef.current, contentRef.current, {
-                    position,
-                    gap,
-                    offset,
-                    align,
-                    refWindow,
-                });
-                state.style = {
-                    ...state.style,
-                    opacity: 1,
-                    transform: "none",
-                    left,
-                    top,
-                };
-                state.arrowProps = {
-                    left: arrowX,
-                    top: arrowY,
-                    pos: arrowPos,
-                };
-                onVisibleChange?.(true);
+                if (!contentRef.current)
+                    return;
+                ensureBaseStyle();
+                if (opts.trigger === "contextmenu") {
+                    computePointPosition();
+                }
+                else {
+                    computeRelativePosition();
+                }
+                setContentVisible(true);
+                opts.onVisibleChange?.(true);
                 clearTimer();
-                statusRef.current = "";
+                phaseRef.current = "";
             });
-        }, showDelay);
+        }, opts.showDelay);
     };
     const handleHide = () => {
-        if (!state.show)
+        if (!showRef.current)
             return;
-        statusRef.current = "hiding";
+        clearAllTimers();
+        phaseRef.current = "hiding";
         timerRef.current = setTimeout(() => {
-            if (statusRef.current !== "hiding") {
+            if (phaseRef.current !== "hiding") {
                 clearTimer();
                 return;
             }
-            state.style = {
-                ...state.style,
-                opacity: 0,
-                transform: "translate(0, 2px)",
-            };
-            setTimeout(() => {
-                state.show = false;
-                clearTimer();
-                onVisibleChange?.(false);
-                statusRef.current = "";
+            setContentVisible(false);
+            afterHideTimerRef.current = setTimeout(() => {
+                afterHideTimerRef.current = null;
+                setShow(false);
+                clearAllTimers();
+                latestRef.current.onVisibleChange?.(false);
+                phaseRef.current = "";
             }, 160);
-        }, hideDelay);
+        }, latestRef.current.hideDelay);
     };
     const handleToggle = (action) => {
         if (action !== undefined) {
             action ? handleShow() : handleHide();
             return;
         }
-        state.show ? handleHide() : handleShow();
-    };
-    const eventMaps = useCreation(() => ({
-        click: {
-            onClick: () => handleToggle(true),
-        },
-        hover: {
-            onMouseEnter: () => handleToggle(true),
-            onMouseLeave: () => handleToggle(false),
-        },
-        focus: {
-            onFocus: () => handleToggle(true),
-            onBlur: () => handleToggle(false),
-        },
-        contextmenu: {
-            onContextMenu: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                if (state.show) {
-                    const [left, top] = getPointPosition(e, contentRef.current);
-                    state.style = {
-                        ...state.style,
-                        left,
-                        top,
-                    };
-                    return;
-                }
-                state.show = true;
-                timerRef.current = setTimeout(() => {
-                    const [left, top] = getPointPosition(e, contentRef.current);
-                    state.style = {
-                        ...state.style,
-                        opacity: 1,
-                        transform: "none",
-                        left,
-                        top,
+        showRef.current ? handleHide() : handleShow();
+    };
+    const hideRef = useRef(handleHide);
+    const toggleRef = useRef(handleToggle);
+    hideRef.current = handleHide;
+    toggleRef.current = handleToggle;
+    const doHide = useMemo(() => () => hideRef.current(), []);
+    const doToggle = useMemo(() => (action) => toggleRef.current(action), []);
+    const eventMaps = useMemo(() => {
+        return {
+            click: {
+                onClick: () => doToggle(true),
+            },
+            hover: {
+                onMouseEnter: () => doToggle(true),
+                onMouseLeave: () => doToggle(false),
+            },
+            focus: {
+                onFocus: () => doToggle(true),
+                onBlur: () => doToggle(false),
+            },
+            contextmenu: {
+                onContextMenu: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    pointRef.current = {
+                        pageX: e.pageX,
+                        pageY: e.pageY,
                     };
-                    clearTimer();
-                    onVisibleChange?.(true);
-                }, showDelay);
+                    if (showRef.current) {
+                        ensureBaseStyle();
+                        computePointPosition();
+                        return;
+                    }
+                    clearAllTimers();
+                    phaseRef.current = "showing";
+                    lastPosRef.current = null;
+                    lastArrowRef.current = null;
+                    arrowElRef.current = null;
+                    setShow(true);
+                    timerRef.current = setTimeout(() => {
+                        if (phaseRef.current !== "showing")
+                            return;
+                        if (!contentRef.current)
+                            return;
+                        ensureBaseStyle();
+                        computePointPosition();
+                        setContentVisible(true);
+                        clearTimer();
+                        latestRef.current.onVisibleChange?.(true);
+                        phaseRef.current = "";
+                    }, latestRef.current.showDelay);
+                },
             },
-        },
-        none: {},
-    }), []);
+            none: {},
+        };
+    }, [doToggle]);
     const contentTouch = useMemo(() => {
         if (!touchable)
             return {};
@@ -1532,72 +1685,132 @@ function Popup(props) {
         }
         return events;
     }, [touchable, trigger]);
-    const computePosition = () => {
-        if (!state.show)
-            return;
-        const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerRef.current, contentRef.current, {
-            position,
-            gap,
-            offset,
-            align,
-            refWindow,
-        });
-        Object.assign(state, {
-            style: { ...state.style, left, top },
-            arrowProps: { left: arrowX, top: arrowY, pos: arrowPos },
-        });
-    };
     const { observe, unobserve, disconnect } = useResizeObserver();
     useEffect(() => {
-        if (trigger === "contextmenu" || !observe)
-            return;
-        triggerRef.current && observe(triggerRef.current, computePosition);
-        if (!watchResize || !contentRef.current)
-            return;
-        observe(contentRef.current, computePosition);
+        if (!observe)
+            return;
+        const triggerEl = triggerRef.current;
+        const contentEl = contentRef.current;
+        if (triggerEl)
+            observe(triggerEl, scheduleComputePosition);
+        if (contentEl)
+            observe(contentEl, scheduleComputePosition);
         return () => {
-            if (!watchResize || !contentRef.current)
-                return;
-            unobserve(contentRef.current);
-            triggerRef.current && unobserve(triggerRef.current);
+            if (contentEl)
+                unobserve(contentEl);
+            if (triggerEl)
+                unobserve(triggerEl);
             disconnect();
         };
-    }, [watchResize, contentRef.current, triggerRef.current]);
+    }, [trigger, observe, unobserve, disconnect, show]);
     useLayoutEffect(() => {
-        if (!fitSize || !state.show)
+        if (!show)
             return;
-        const vertical = ["top", "bottom"].includes(position);
-        const size = triggerRef.current?.[vertical ? "offsetWidth" : "offsetHeight"];
-        state.style = { ...state.style, [vertical ? "width" : "height"]: size };
-    }, [state.show, fitSize]);
+        ensureBaseStyle();
+        if (latestRef.current.trigger === "contextmenu") {
+            computePointPosition();
+        }
+        else {
+            computeRelativePosition();
+        }
+    }, [show]);
     useLayoutEffect(() => {
-        handleToggle(visible);
+        doToggle(visible);
     }, [visible]);
     useEffect(() => {
         return () => {
-            clearTimer();
+            clearAllTimers();
         };
     }, []);
-    return (jsxs(Fragment, { children: [Children.map(children, (child) => {
-                if (!isValidElement(child))
-                    return;
-                const { className, ...restProps } = child.props;
-                Object.keys(eventMaps[trigger]).map((evt) => {
-                    if (!restProps[evt])
-                        return;
-                    const fn = eventMaps[trigger][evt];
-                    eventMaps[trigger][evt] = (e) => {
-                        fn();
-                        restProps[evt](e);
-                    };
-                });
-                return cloneElement(child, {
-                    ref: triggerRef,
-                    className,
-                    ...restProps,
-                    ...eventMaps[trigger],
+    const mouseUpHandlerRef = useRef(() => { });
+    mouseUpHandlerRef.current = (e) => {
+        if (!showRef.current)
+            return;
+        const triggerEl = triggerRef.current;
+        const contentEl = contentRef.current;
+        if (!triggerEl || !contentEl)
+            return;
+        const tar = e.target;
+        if (triggerEl.contains(tar) || contentEl.contains(tar))
+            return;
+        doHide();
+    };
+    const onGlobalMouseUp = useMemo(() => (e) => mouseUpHandlerRef.current(e), []);
+    useMouseUp(onGlobalMouseUp);
+    useEffect(() => {
+        if (!show)
+            return;
+        if (typeof window === "undefined")
+            return;
+        const onScrollOrResize = debounce({ delay: 160 }, () => {
+            scheduleComputePosition();
+        });
+        window.addEventListener("scroll", onScrollOrResize, {
+            passive: true,
+            capture: true,
+        });
+        return () => {
+            window.removeEventListener("scroll", onScrollOrResize, true);
+        };
+    }, [show]);
+    const mergeRefs = (...refs) => {
+        return (node) => {
+            for (const ref of refs) {
+                if (!ref)
+                    continue;
+                if (typeof ref === "function") {
+                    ref(node);
+                }
+                else {
+                    ref.current = node;
+                }
+            }
+        };
+    };
+    return (jsxs(Fragment, { children: [(() => {
+                const events = eventMaps[trigger];
+                const items = Children.toArray(children);
+                const canAttachRef = (el) => {
+                    if (!isValidElement(el))
+                        return false;
+                    const t = el.type;
+                    if (typeof t === "string")
+                        return true;
+                    if (t?.prototype?.isReactComponent)
+                        return true;
+                    if (t?.$$typeof === Symbol.for("react.forward_ref"))
+                        return true;
+                    return false;
+                };
+                if (items.length !== 1) {
+                    return (jsx("div", { ref: triggerRef, ...events, className: 'i-popup-trigger', style: { display: "inline-block" }, children: children }));
+                }
+                const only = items[0];
+                if (!isValidElement(only) || !canAttachRef(only)) {
+                    return (jsx("div", { ref: triggerRef, ...events, className: 'i-popup-trigger', style: { display: "inline-block" }, children: only }));
+                }
+                const { className: childClassName, ...restProps } = only.props;
+                const nextProps = { ...restProps };
+                for (const evt of Object.keys(events)) {
+                    const theirs = restProps[evt];
+                    const ours = events[evt];
+                    nextProps[evt] =
+                        typeof theirs === "function"
+                            ? (e) => {
+                                ours(e);
+                                theirs(e);
+                            }
+                            : ours;
+                }
+                return cloneElement(only, {
+                    ref: mergeRefs(only.ref, triggerRef),
+                    className: childClassName,
+                    ...nextProps,
                 });
-            }), state.show && (jsx(Content$2, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: { ...style, ...state.style }, arrowProps: state.arrowProps, className: className, ...contentTouch, trigger: triggerRef.current, getContainer: getContainer, children: content }))] }));
+            })(), show && (jsx(Content$2, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: {
+                    ...style,
+                    position: "fixed",
+                }, className: className, ...contentTouch, trigger: triggerRef.current, children: content }))] }));
 }
 
 const { Item: ListItem } = List$1;
@@ -1808,12 +2021,9 @@ const Context = createContext({});
 
 function Field(props) {
     const { name, required, children } = props;
-    const state = useReactive({
-        value: undefined,
-        status: "normal",
-        message: undefined,
-        update: 0,
-    });
+    const [fieldValue, setFieldValue] = useState(undefined);
+    const [fieldStatus, setFieldStatus] = useState("normal");
+    const [fieldMessage, setFieldMessage] = useState(undefined);
     const form = useContext(Context);
     const { id } = form;
     const handleChange = (v) => {
@@ -1830,33 +2040,33 @@ function Field(props) {
             if (!isValidElement(node))
                 return null;
             const { onChange } = node.props;
-            const { value, status, message } = state;
             return cloneElement(node, {
-                value,
-                status,
-                message,
+                value: fieldValue,
+                status: fieldStatus,
+                message: fieldMessage,
                 required,
                 onChange: (...args) => {
                     handleChange(args[0]);
                     onChange?.(...args);
-                    Object.assign(state, {
-                        status: "normal",
-                        message: undefined,
-                    });
+                    setFieldStatus("normal");
+                    setFieldMessage(undefined);
                 },
             });
         });
-    }, [children, state.update]);
+    }, [children, fieldValue, fieldStatus, fieldMessage, required]);
     useEffect(() => {
         if (!name)
             return;
         PubSub.subscribe(`${id}:set:${name}`, (evt, v) => {
-            state.value = v;
-            state.update += 1;
+            setFieldValue(v);
         });
         PubSub.subscribe(`${id}:invalid:${name}`, (evt, v) => {
-            Object.assign(state, v);
-            state.update += 1;
+            if (v?.value !== undefined)
+                setFieldValue(v.value);
+            if (v?.status)
+                setFieldStatus(v.status);
+            if ("message" in (v ?? {}))
+                setFieldMessage(v.message);
         });
         Promise.resolve().then(() => {
             form.set(name, form.cacheData[name] ?? undefined);
@@ -2099,6 +2309,8 @@ function Content$1(props) {
     return (jsxs(Fragment, { children: [showHeader && (jsxs("header", { className: 'i-modal-header', children: [title && jsx("b", { children: title }), jsx(Helpericon, { active: !hideCloseButton, className: 'i-modal-close', onClick: onClose })] })), jsx("div", { className: 'i-modal-content', children: children }), jsx("footer", { className: 'i-modal-footer', children: renderFooter })] }));
 }
 
+const ModalContext = createContext(false);
+
 function useModal() {
     const ref = useRef(null);
     const handleOpen = (props) => {
@@ -2847,11 +3059,33 @@ function InputContainer(props) {
 
 const Number$1 = (props) => {
     const { ref, label, name, value = "", labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, width, status = "normal", append, border, prepend, disabled, message, tip, hideControl, showMax, style, onChange, onEnter, onInput, onBlur, ...restProps } = props;
-    const state = useReactive({
-        value,
-    });
-    const getRangeNumber = (v) => clamp(v, min, max);
-    const getFormatNumber = (v) => formatNumber(v, { precision, thousand });
+    const [inputValue, setInputValue] = useState(value === undefined || value === null ? "" : String(value));
+    const formatOut = (num) => {
+        const v = clamp(num, min, max);
+        if (precision !== undefined)
+            return formatNumber(v, { precision, thousand });
+        const s = String(v);
+        if (!thousand)
+            return s;
+        const negative = s.startsWith("-");
+        const body = negative ? s.slice(1) : s;
+        const [integer, decimal] = body.split(".");
+        const withThousand = integer.replace(/\B(?=(\d{3})+(?!\d))/g, thousand);
+        return decimal
+            ? `${negative ? "-" : ""}${withThousand}.${decimal}`
+            : `${negative ? "-" : ""}${withThousand}`;
+    };
+    const sanitizeNumberInput = (raw) => {
+        const hasMinus = raw.startsWith("-");
+        let v = raw.replace(/[^\d.]/g, "");
+        if (hasMinus)
+            v = `-${v}`;
+        const parts = v.split(".");
+        if (parts.length > 1) {
+            v = `${parts.shift()}.${parts.join("")}`;
+        }
+        return v;
+    };
     const formatInputValue = (v) => {
         if (!v)
             return "";
@@ -2863,32 +3097,57 @@ const Number$1 = (props) => {
     };
     const handleChange = (e) => {
         const { value } = e.target;
-        const v = formatInputValue(value.replace(/[^\d\.-]/g, "")); // 保留负号和小数点
-        const numValue = clamp(+v, min, max); // 确保值在范围内
-        state.value = getFormatNumber(numValue); // 修复 thousand 格式化
-        onChange?.(numValue, e);
+        const v = sanitizeNumberInput(formatInputValue(value));
+        const isIntermediate = v === "" || v === "-" || v === "." || v === "-." || v.endsWith(".");
+        setInputValue(v);
+        if (isIntermediate)
+            return;
+        const num = parseFloat(v);
+        if (globalThis.Number.isNaN(num))
+            return;
+        onChange?.(clamp(num, min, max), e);
+        if (precision !== undefined)
+            setInputValue(formatOut(num));
     };
     const handleOperate = (param) => {
-        const value = parseFloat(formatInputValue(state.value)) || 0; // 确保值为数字，默认值为 0
-        const result = getRangeNumber(value + param);
-        state.value = getFormatNumber(result);
-        onChange?.(result);
+        const value = parseFloat(formatInputValue(inputValue)) || 0; // 确保值为数字，默认值为 0
+        const result = value + param;
+        setInputValue(formatOut(result));
+        onChange?.(clamp(result, min, max));
     };
     const handleMax = () => {
-        const result = getRangeNumber(max);
-        state.value = getFormatNumber(result);
-        onChange?.(result);
+        setInputValue(formatOut(max));
+        onChange?.(clamp(max, min, max));
+    };
+    const handleBlur = (e) => {
+        onBlur?.(e);
+        const v = sanitizeNumberInput(formatInputValue(inputValue));
+        if (!v || v === "-" || v === "." || v === "-.") {
+            setInputValue("");
+            return;
+        }
+        const num = parseFloat(v);
+        if (globalThis.Number.isNaN(num))
+            return;
+        const numValue = clamp(num, min, max);
+        setInputValue(formatOut(numValue));
+        onChange?.(numValue, e);
     };
     useEffect(() => {
-        state.value = value;
+        setInputValue(value === undefined || value === null ? "" : String(value));
     }, [value]);
     const inputProps = {
         ref,
         name,
         disabled,
-        value: state.value,
+        value: inputValue,
         className: "i-input i-input-number",
         onChange: handleChange,
+        onKeyDown: (e) => {
+            e.code === "Enter" && onEnter?.(e);
+        },
+        onInput,
+        onBlur: handleBlur,
         ...restProps,
     };
     return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, children: jsxs("div", { className: classNames("i-input-item", {
@@ -2899,9 +3158,7 @@ const Number$1 = (props) => {
 
 const Range = (props) => {
     const { label, name, value, labelInline, min = -Infinity, max = Infinity, type, className, status = "normal", message, tip, append, prepend, step = 1, width, thousand, precision, hideControl, placeholder, border, autoSwitch, onChange, onBlur, style, ...restProps } = props;
-    const state = useReactive({
-        value,
-    });
+    const [rangeValue, setRangeValue] = useState(value);
     const getRangeNumber = (v) => clamp(v, min, max);
     const getFormatNumber = (v) => formatNumber(v, { precision, thousand });
     const formatInputValue = (v) => {
@@ -2914,31 +3171,31 @@ const Range = (props) => {
     const handleChange = (e, i) => {
         const { value } = e.target;
         const v = formatInputValue(value.replace(/[^\d\.-]/g, ""));
-        const range = Array.isArray(state.value) ? state.value : [];
+        const range = Array.isArray(rangeValue) ? [...rangeValue] : [];
         range[i] = v;
-        state.value = range;
+        setRangeValue(range);
         onChange?.(range, e);
     };
     const handleOperate = (e, param, i) => {
         e.preventDefault();
         e.stopPropagation();
-        const range = Array.isArray(state.value) ? state.value : [];
+        const range = Array.isArray(rangeValue) ? [...rangeValue] : [];
         const value = formatInputValue(range[i]) ?? 0;
         const result = getRangeNumber(+value + param);
         range[i] = getFormatNumber(result);
-        state.value = range;
+        setRangeValue(range);
         onChange?.(range, e);
     };
     const handleSwitch = (e) => {
         e?.preventDefault();
         e?.stopPropagation();
-        const range = state.value ? state.value : [];
+        const range = Array.isArray(rangeValue) ? [...rangeValue] : [];
         [range[0], range[1]] = [range[1], range[0]];
-        state.value = range;
+        setRangeValue(range);
         onChange?.(range);
     };
     useEffect(() => {
-        state.value = value;
+        setRangeValue(value);
     }, [value]);
     const inputProps = {
         name,
@@ -2948,7 +3205,7 @@ const Range = (props) => {
     const handleBlur = () => {
         if (!autoSwitch)
             return;
-        const range = Array.isArray(state.value) ? state.value : [];
+        const range = Array.isArray(rangeValue) ? rangeValue : [];
         if (range.length < 2)
             return;
         const [left, right] = range.map(Number);
@@ -2959,18 +3216,16 @@ const Range = (props) => {
     return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, children: jsxs("div", { className: classNames("i-input-item", {
                 [`i-input-${status}`]: status !== "normal",
                 "i-input-borderless": !border,
-            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 0) })), jsx("input", { value: state.value?.[0] || "", placeholder: placeholder?.[0], ...inputProps, onBlur: handleBlur, onChange: (e) => handleChange(e, 0) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 0) })), jsx(Helpericon, { active: true, icon: jsx(SyncAltRound, {}), style: { margin: 0 }, onClick: handleSwitch }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 1) })), jsx("input", { value: state.value?.[1] || "", placeholder: placeholder?.[1], ...inputProps, onBlur: handleBlur, onChange: (e) => handleChange(e, 1) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 1) })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
+            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 0) })), jsx("input", { value: rangeValue?.[0] || "", placeholder: placeholder?.[0], ...inputProps, onBlur: handleBlur, onChange: (e) => handleChange(e, 0) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 0) })), jsx(Helpericon, { active: true, icon: jsx(SyncAltRound, {}), style: { margin: 0 }, onClick: handleSwitch }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 1) })), jsx("input", { value: rangeValue?.[1] || "", placeholder: placeholder?.[1], ...inputProps, onBlur: handleBlur, onChange: (e) => handleChange(e, 1) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 1) })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
 };
 
 const Textarea = (props) => {
     const { ref, label, name, value = "", labelInline, className, status = "normal", message, tip, autoSize, border, width, style, onChange, onEnter, ...restProps } = props;
-    const state = useReactive({
-        value,
-    });
+    const [textareaValue, setTextareaValue] = useState(value);
     const refTextarea = useRef(null);
     const handleChange = (e) => {
         const v = e.target.value;
-        state.value = v;
+        setTextareaValue(v);
         const ta = refTextarea.current;
         if (autoSize && ta) {
             ta.style.height = `${ta.scrollHeight}px`;
@@ -2984,7 +3239,7 @@ const Textarea = (props) => {
         onEnter?.(e);
     };
     useEffect(() => {
-        state.value = value;
+        setTextareaValue(value);
     }, [value]);
     useImperativeHandle(ref, () => {
         return {
@@ -2994,7 +3249,7 @@ const Textarea = (props) => {
     const inputProps = {
         ref: refTextarea,
         name,
-        value: state.value,
+        value: textareaValue,
         className: "i-input i-textarea",
         onChange: handleChange,
         onKeyDown: handleKeydown,
@@ -3008,14 +3263,12 @@ const Textarea = (props) => {
 
 const Input = ((props) => {
     const { ref, type = "text", label, name, value = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, width, hideVisible, border, underline, required, maxLength, onChange, onEnter, onClear, style, ...restProps } = props;
-    const state = useReactive({
-        value,
-        type,
-        visible: false,
-    });
+    const [inputValue, setInputValue] = useState(value);
+    const [inputType, setInputType] = useState(type);
+    const [visible, setVisible] = useState(false);
     const handleChange = (e) => {
         const v = e.target.value;
-        state.value = v;
+        setInputValue(v);
         onChange?.(v, e);
     };
     const handleKeydown = (e) => {
@@ -3023,43 +3276,49 @@ const Input = ((props) => {
     };
     const handleHelperClick = () => {
         if (type === "password" && !hideVisible) {
-            Object.assign(state, {
-                visible: !state.visible,
-                type: !state.visible ? "text" : "password",
+            setVisible((v) => {
+                const next = !v;
+                setInputType(next ? "text" : "password");
+                return next;
             });
             return;
         }
         const v = "";
+        setInputValue(v);
         onChange?.(v);
         onClear?.();
     };
     const HelperIcon = useMemo(() => {
         if (type === "password") {
-            return state.visible ? jsx(VisibilityRound, {}) : jsx(VisibilityOffRound, {});
+            return visible ? jsx(VisibilityRound, {}) : jsx(VisibilityOffRound, {});
         }
         return undefined;
-    }, [state.visible]);
+    }, [type, visible]);
     useEffect(() => {
-        state.value = value;
+        setInputValue(value);
     }, [value]);
     const inputProps = {
         ref,
-        type: state.type,
+        type: inputType,
         name,
-        value: state.value,
+        value: inputValue,
         maxLength,
         className: classNames("i-input", `i-input-${type}`),
         onChange: handleChange,
         onKeyDown: handleKeydown,
         ...restProps,
     };
-    const clearable = clear && state.value;
-    const showHelper = type === "password" && !!state.value;
+    useEffect(() => {
+        setInputType(type);
+        setVisible(false);
+    }, [type]);
+    const clearable = clear && inputValue;
+    const showHelper = type === "password" && !!inputValue;
     return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, required: required, children: jsxs("div", { className: classNames("i-input-item", {
                 [`i-input-${status}`]: status !== "normal",
                 "i-input-borderless": !border,
                 "i-input-underline": underline,
-            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), jsx("input", { ...inputProps }), maxLength && state.value?.length > 0 && (jsxs("span", { className: 'color-8 pr-4 font-sm', children: [state.value.length, " / ", maxLength] })), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
+            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), jsx("input", { ...inputProps }), maxLength && inputValue?.length > 0 && (jsxs("span", { className: 'color-8 pr-4 font-sm', children: [inputValue.length, " / ", maxLength] })), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
 });
 Input.Textarea = Textarea;
 Input.Number = Number$1;
@@ -3347,38 +3606,34 @@ 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 state = useReactive({
-        inputValue: "",
-        filterValue: "",
-        value,
-        loading: false,
-    });
+    const [filterValue, setFilterValue] = useState("");
+    const [selectedValue, setSelectedValue] = useState(value);
     const [active, setActive] = useState(false);
     const formattedOptions = useMemo(() => formatOption(options), [options]);
     const filterOptions = useMemo(() => {
-        const { filterValue: fv } = state;
+        const fv = filterValue;
         if (!fv || !filter)
             return formattedOptions;
         const filterFn = typeof filter === "function"
             ? filter
             : (opt) => opt.value.includes(fv) || opt.label.includes(fv);
         return formattedOptions.filter(filterFn);
-    }, [formattedOptions, filter, state.filterValue]);
+    }, [formattedOptions, filter, filterValue]);
     const changeValue = (v) => {
-        state.value = v;
+        setSelectedValue(v);
         onChange?.(v);
     };
     const displayLabel = useMemo(() => {
         if (multiple) {
             return "";
         }
-        const option = formattedOptions.find((opt) => opt.value === state.value);
-        return option ? option.label : state.value;
-    }, [state.value, formattedOptions]);
+        const option = formattedOptions.find((opt) => opt.value === selectedValue);
+        return option ? option.label : selectedValue;
+    }, [selectedValue, formattedOptions]);
     const handleSelect = (value, option) => {
         onSelect?.(value, option);
         if (multiple) {
-            const values = [...state.value];
+            const values = [...selectedValue];
             const i = values.findIndex((v) => v === value);
             i > -1 ? values.splice(i, 1) : values.push(value);
             changeValue(values);
@@ -3391,7 +3646,7 @@ const Select = (props) => {
         setActive(visible);
         if (!filter)
             return;
-        state.filterValue = "";
+        setFilterValue("");
     };
     const handleHelperClick = (e) => {
         e.stopPropagation();
@@ -3402,34 +3657,34 @@ const Select = (props) => {
     };
     const handleFilterChange = debounce({ delay: 400 }, (e) => {
         const v = e.target.value;
-        state.filterValue = v;
+        setFilterValue(v);
     });
     const handleInputChange = (e) => {
-        state.filterValue = e.target.value;
+        setFilterValue(e.target.value);
     };
     useEffect(() => {
-        state.value = value;
+        setSelectedValue(value);
     }, [value]);
     const hasValue = multiple
-        ? state.value.length > 0
-        : !!state.value;
+        ? selectedValue.length > 0
+        : !!selectedValue;
     const clearable = !hideClear && active && hasValue;
     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: state.value, multiple: multiple, filter: !!filter, filterPlaceholder: filterPlaceholder, onSelect: handleSelect, onFilter: handleFilterChange }), children: jsxs("div", { className: classNames("i-input-item", {
+        }), 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", {
                         [`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: state.value, ...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,
-                                value: state.value,
+                                value: selectedValue,
                                 multiple,
                                 maxDisplay,
                                 onSelect: handleSelect,
-                            }) })) : (jsx("input", { className: 'i-input i-select', placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsx("input", { value: active ? state.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 = {
@@ -3439,23 +3694,21 @@ const ColorMethods = {
 };
 function Footer(props) {
     const { value, type, onTypeChange, onChange, onOk } = props;
-    const state = useReactive({
-        value,
-        type,
-    });
+    const [inputValue, setInputValue] = useState(value);
+    const [colorType, setColorType] = useState(type);
     const handleChange = (v) => {
-        state.value = v;
+        setInputValue(v);
         onChange(v);
     };
     const handleTypeChange = (t) => {
-        state.type = t;
+        setColorType(t);
         onTypeChange(t);
     };
     useEffect(() => {
-        state.value = value;
-        state.type = type;
+        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: state.type, onChange: handleTypeChange }), jsx(Input, { placeholder: 'color', value: state.value, 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 }), jsx(Input, { placeholder: 'color', value: inputValue, onChange: handleChange }), jsx(Button, { square: true, onClick: onOk, children: jsx(Icon, { icon: jsx(CheckRound, {}) }) })] }));
 }
 
 const Handle = (props) => {
@@ -3465,48 +3718,51 @@ const Handle = (props) => {
 
 function ColorPicker(props) {
     const { value, type = "HEX", disabledAlpha, children, usePanel, handle = "both", placeholder = "Colors", popupProps, onChange, } = props;
-    const state = useReactive({
-        type,
-        value,
-        syncValue: value,
-        visible: popupProps?.visible,
-    });
+    const [colorType, setColorType] = useState(type);
+    const [colorValue, setColorValue] = useState(value);
+    const [syncValue, setSyncValue] = useState(value);
+    const [visible, setVisible] = useState(popupProps?.visible);
     const handleChange = (target) => {
-        state.syncValue = target;
+        setSyncValue(target);
     };
     const handleComplete = (target) => {
-        const method = ColorMethods[state.type];
+        const method = ColorMethods[colorType];
         if (target.a !== 1) {
             target.a = parseFloat(target.a.toFixed(3));
         }
-        state.value = target[method]?.();
+        setColorValue(target[method]?.());
     };
     const handleVisibleChange = (v) => {
-        state.visible = v;
+        setVisible(v);
         popupProps?.onVisibleChange?.(v);
     };
     const handleTypeChange = (t) => {
         const method = ColorMethods[t];
-        state.type = t;
-        state.value = state.syncValue[method]?.();
+        setColorType(t);
+        setColorValue(syncValue?.[method]?.());
     };
     const handleValueChange = (v) => {
-        state.value = v;
-        state.syncValue = v;
+        setColorValue(v);
+        setSyncValue(v);
     };
     const handleOk = () => {
-        onChange?.(state.value);
-        state.visible = false;
+        onChange?.(colorValue);
+        setVisible(false);
     };
     useEffect(() => {
-        state.syncValue = value;
-        state.value = value;
+        setSyncValue(value);
+        setColorValue(value);
     }, [value]);
+    useEffect(() => {
+        if (popupProps?.visible !== undefined) {
+            setVisible(popupProps.visible);
+        }
+    }, [popupProps?.visible]);
     if (usePanel) {
         return jsx(ColorsPanel, { ...props });
     }
-    return (jsx(Popup, { trigger: 'click', touchable: true, position: 'bottom', ...popupProps, visible: state.visible, content: jsx(ColorsPanel, { value: state.syncValue, disabledAlpha: disabledAlpha, panelRender: (panel) => {
-                return (jsxs(Fragment, { children: [panel, jsx(Footer, { value: state.value, type: state.type, onTypeChange: handleTypeChange, onChange: handleValueChange, onOk: handleOk })] }));
+    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 })) }));
 }
 
@@ -3556,61 +3812,56 @@ const YearMonth = (props) => {
 };
 const Panel$1 = (props) => {
     const { value, unitYear, unitMonth, renderDate, renderMonth = (m) => m, renderYear = (y) => y, disabledDate, onDateClick, } = props;
-    const state = useReactive({
-        today: value,
-        month: value || dayjs(),
-        selectedYear: dayjs(),
-        years: [],
-        selectable: false,
-    });
+    const [today, setToday] = useState(value);
+    const [month, setMonth] = useState(value || dayjs());
+    const [selectedYear, setSelectedYear] = useState(dayjs());
+    const [years, setYears] = useState([]);
+    const [selectable, setSelectable] = useState(false);
     const $years = useRef(null);
     const handleOperateMonth = (next) => {
-        state.month = state.month[next ? "add" : "subtract"](1, "month");
+        setMonth((m) => m[next ? "add" : "subtract"](1, "month"));
     };
     const handleChangeDate = (date) => {
-        if (date.isSame(state.today, "day"))
+        if (date.isSame(today, "day"))
             return;
-        if (!date.isSame(state.month, "month")) {
-            state.month = date;
+        if (!date.isSame(month, "month")) {
+            setMonth(date);
         }
-        state.today = date;
+        setToday(date);
         onDateClick?.(date);
     };
     const handleChangeMonth = (month) => {
-        state.month = state.month
-            .year(state.selectedYear.year())
-            .month(month - 1);
-        state.selectable = false;
+        setMonth((m) => m.year(selectedYear.year()).month(month - 1));
+        setSelectable(false);
     };
     const getMoreYears = throttle({ interval: 100 }, (e) => {
         const isUp = e.deltaY < 0;
-        state.years = state.years.map((y) => (y += isUp ? -1 : 1));
+        setYears((ys) => ys.map((y) => y + (isUp ? -1 : 1)));
     });
     useEffect(() => {
-        if (!state.selectable)
+        if (!selectable)
             return;
-        state.selectedYear = state.month;
-        const y = state.selectedYear.year();
-        const years = Array.from({ length: 7 }).map((_, i) => y - 3 + i);
-        state.years = [...years];
-    }, [state.selectable]);
+        setSelectedYear(month);
+        const y = month.year();
+        const nextYears = Array.from({ length: 7 }).map((_, i) => y - 3 + i);
+        setYears([...nextYears]);
+    }, [selectable, month]);
     useEffect(() => {
-        state.today = value;
-        state.month = value || dayjs();
+        setToday(value);
+        setMonth(value || dayjs());
     }, [value]);
-    return (jsxs("div", { className: 'i-datepicker', children: [jsxs("div", { className: 'i-datepicker-units', children: [jsx(YearMonth, { value: state.month, unitYear: unitYear, unitMonth: unitMonth, renderMonth: renderMonth, renderYear: renderYear, onClick: () => (state.selectable = true) }), jsx("a", { className: 'ml-auto i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(false), children: jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }) }), jsx("a", { className: 'i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(true), children: jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }) })] }), jsxs("div", { className: classNames("i-datepicker-ym", {
-                    "i-datepicker-active": state.selectable,
+    return (jsxs("div", { className: 'i-datepicker', children: [jsxs("div", { className: 'i-datepicker-units', children: [jsx(YearMonth, { value: month, unitYear: unitYear, unitMonth: unitMonth, renderMonth: renderMonth, renderYear: renderYear, onClick: () => setSelectable(true) }), jsx("a", { className: 'ml-auto i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(false), children: jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }) }), jsx("a", { className: 'i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(true), children: jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }) })] }), jsxs("div", { className: classNames("i-datepicker-ym", {
+                    "i-datepicker-active": selectable,
                 }), children: [jsx(Helpericon, { active: true, className: 'i-datepicker-close', onClick: (e) => {
                             e.stopPropagation();
-                            state.selectable = false;
-                        } }), jsx("div", { ref: $years, className: 'i-datepicker-years', onWheel: getMoreYears, children: state.years.map((y) => (jsx("a", { className: classNames("i-datepicker-year", {
-                                "i-datepicker-active": y === state.selectedYear.year(),
-                            }), onClick: () => (state.selectedYear =
-                                state.selectedYear.year(y)), children: renderYear(y) }, y))) }), jsx("div", { className: 'i-datepicker-months', children: MONTHS.map((m) => {
+                            setSelectable(false);
+                        } }), jsx("div", { ref: $years, className: 'i-datepicker-years', onWheel: getMoreYears, children: years.map((y) => (jsx("a", { className: classNames("i-datepicker-year", {
+                                "i-datepicker-active": y === selectedYear.year(),
+                            }), onClick: () => setSelectedYear((sy) => sy.year(y)), children: renderYear(y) }, y))) }), jsx("div", { className: 'i-datepicker-months', children: MONTHS.map((m) => {
                             return (jsx("a", { className: classNames("i-datepicker-month", {
-                                    "i-datepicker-active": m === state.month.month() + 1,
+                                    "i-datepicker-active": m === month.month() + 1,
                                 }), onClick: () => handleChangeMonth(m), children: renderMonth(m) }, m));
-                        }) })] }), jsx(Dates, { value: state.today, month: state.month, disabledDate: disabledDate, onDateClick: handleChangeDate, renderDate: renderDate })] }));
+                        }) })] }), jsx(Dates, { value: today, month: month, disabledDate: disabledDate, onDateClick: handleChangeDate, renderDate: renderDate })] }));
 };
 
 dayjs.extend(customParseFormat);
@@ -3618,29 +3869,27 @@ const FORMATTYPES = ["YYYY-MM-DD", "YYYY-M-D", "YYYY/MM/DD", "YYYY/M/D"];
 const FORMAT$1 = "YYYY-MM-DD";
 const Datepicker = (props) => {
     const { name, value, weeks, format = FORMAT$1, placeholder = props.format ?? FORMAT$1, className, renderDate, renderMonth, renderYear, popupProps, disabledDate, onDateClick, onChange, onBlur, ...restProps } = props;
-    const state = useReactive({
-        value,
-    });
+    const [inputValue, setInputValue] = useState(value);
     const [active, setActive] = useState(false);
     const dayJsValue = useMemo(() => {
-        if (!state.value)
+        if (!inputValue)
             return null;
-        const date = dayjs(state.value, format, true);
+        const date = dayjs(inputValue, format, true);
         if (date.isValid())
             return date;
         return null;
-    }, [state.value]);
+    }, [inputValue, format]);
     const handleDateClick = (date) => {
         handleChange(date.format(format));
     };
     const handleChange = (v) => {
-        state.value = v;
+        setInputValue(v);
         onChange?.(v);
     };
     const handleSetDate = () => {
-        if (!state.value)
+        if (!inputValue)
             return;
-        const date = dayjs(state.value, FORMATTYPES, true);
+        const date = dayjs(inputValue, FORMATTYPES, true);
         if (date.isValid()) {
             handleChange(date.format(format));
             return;
@@ -3656,9 +3905,9 @@ const Datepicker = (props) => {
         setActive(v);
     };
     useEffect(() => {
-        state.value = value;
+        setInputValue(value);
     }, [value]);
-    return (jsx(Popup, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', onVisibleChange: handleVisibleChange, watchResize: true, content: jsx(Panel$1, { value: dayJsValue, weeks: weeks, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick }), ...popupProps, children: jsx(Input, { value: state.value, append: jsx(Icon, { icon: jsx(CalendarMonthTwotone, {}), className: 'i-datepicker-icon', size: '1em' }), placeholder: placeholder, onChange: handleChange, onBlur: handleBlur, onEnter: handleSetDate, className: classNames("i-datepicker-label", className), ...restProps }) }));
+    return (jsx(Popup, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', onVisibleChange: handleVisibleChange, content: jsx(Panel$1, { value: dayJsValue, weeks: weeks, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick }), ...popupProps, children: jsx(Input, { value: inputValue, append: jsx(Icon, { icon: jsx(CalendarMonthTwotone, {}), className: 'i-datepicker-icon', size: '1em' }), placeholder: placeholder, onChange: handleChange, onBlur: handleBlur, onEnter: handleSetDate, className: classNames("i-datepicker-label", className), ...restProps }) }));
 };
 
 function Items(props) {
@@ -3681,12 +3930,10 @@ const UnitMaps = {
 };
 function Panel(props) {
     const { value, stepH = 1, stepM = 1, stepS = 1, format, periods, renderItem, onChange, onFallback, } = props;
-    const state = useReactive({
-        period: undefined,
-        hour: undefined,
-        minute: undefined,
-        second: undefined,
-    });
+    const [period, setPeriod] = useState(undefined);
+    const [hour, setHour] = useState(undefined);
+    const [minute, setMinute] = useState(undefined);
+    const [second, setSecond] = useState(undefined);
     const [hours, minutes, seconds] = useMemo(() => {
         const hasH = format.includes("h");
         const hasM = format.includes("m");
@@ -3702,29 +3949,45 @@ function Panel(props) {
             : [];
         return [hours, minutes, seconds];
     }, [stepH, stepM, stepS, format, periods]);
-    const updateValue = () => {
+    const updateValue = (next) => {
+        const nextPeriod = next?.period ?? period;
+        const nextHour = next?.hour ?? hour;
+        const nextMinute = next?.minute ?? minute;
+        const nextSecond = next?.second ?? second;
         const reg = /(hh|h){1}|(mm|m){1}|(ss|s){1}/gi;
         let result = format.replace(reg, (pattern) => {
             const p = pattern.toLowerCase();
             const u = UnitMaps[p];
-            const n = state[u] ?? 0;
+            const n = u === "hour"
+                ? (nextHour ?? 0)
+                : u === "minute"
+                    ? (nextMinute ?? 0)
+                    : (nextSecond ?? 0);
             return p.length > 1 && n < 10 ? `0${n ?? 0}` : n ?? 0;
         });
         if (periods && hours.length > 0) {
-            result = `${state.period ?? periods[0]} ${result}`;
+            result = `${nextPeriod ?? periods[0]} ${result}`;
         }
         onChange(result);
     };
     const handleSetTime = (v, unit) => {
-        state[unit] = v;
-        updateValue();
+        const next = { period, hour, minute, second, [unit]: v };
+        if (unit === "period")
+            setPeriod(v);
+        if (unit === "hour")
+            setHour(v);
+        if (unit === "minute")
+            setMinute(v);
+        if (unit === "second")
+            setSecond(v);
+        updateValue(next);
     };
     useEffect(() => {
         let time = value ?? "";
         if (periods && hours.length > 0 && value) {
             const [p, t] = value.split(" ");
             time = t ?? "";
-            state.period = periods.includes(p) ? p : undefined;
+            setPeriod(periods.includes(p) ? p : undefined);
         }
         const nums = time.match(/\d+/g) ?? [];
         if (!nums.length) {
@@ -3732,40 +3995,41 @@ function Panel(props) {
             return;
         }
         let i = 0;
+        const parsed = {
+            hour: undefined,
+            minute: undefined,
+            second: undefined,
+        };
         const r = format.replace(/(hh|h)+|(mm|m)+|(ss|s)+/gi, (p) => {
             const n = nums[i++] ?? 0;
-            let o = p;
-            if (UnitMaps[p] === "hour") {
-                o = Math.min(periods ? 11 : 23, n);
-            }
-            o = Math.min(59, n);
-            state[UnitMaps[p]] = o;
+            const o = Math.min(59, n);
+            parsed[UnitMaps[p]] = o;
             return p.length > 1 && o < 10 ? `0${o}` : o;
         });
+        setHour(parsed.hour);
+        setMinute(parsed.minute);
+        setSecond(parsed.second);
         onFallback(r);
-    }, [value]);
-    return (jsxs("div", { className: 'i-timepicker', children: [hours.length > 0 && (jsxs(Fragment, { children: [periods && (jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: periods, active: state.period, onClick: (p) => handleSetTime(p, "period") }) })), jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: hours, active: state.hour, unit: 'hour', renderItem: renderItem, onClick: (h) => handleSetTime(h, "hour") }) })] })), minutes.length > 0 && (jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: minutes, active: state.minute, unit: 'minute', renderItem: renderItem, onClick: (m) => handleSetTime(m, "minute") }) })), seconds.length > 0 && (jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: seconds, active: state.second, unit: 'second', renderItem: renderItem, onClick: (s) => handleSetTime(s, "second") }) }))] }));
+    }, [value, format, hours.length, periods]);
+    return (jsxs("div", { className: 'i-timepicker', children: [hours.length > 0 && (jsxs(Fragment, { children: [periods && (jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: periods, active: period, onClick: (p) => handleSetTime(p, "period") }) })), jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: hours, active: hour, unit: 'hour', renderItem: renderItem, onClick: (h) => handleSetTime(h, "hour") }) })] })), minutes.length > 0 && (jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: minutes, active: minute, unit: 'minute', renderItem: renderItem, onClick: (m) => handleSetTime(m, "minute") }) })), seconds.length > 0 && (jsx("div", { className: 'i-timepicker-list', children: jsx(Items, { items: seconds, active: second, unit: 'second', renderItem: renderItem, onClick: (s) => handleSetTime(s, "second") }) }))] }));
 }
 
 const FORMAT = "hh:mm:ss";
 function TimePicker(props) {
     const { name, value, format = FORMAT, periods, placeholder = props.format ?? FORMAT, className, renderItem, onChange, onBlur, popupProps, ...restProps } = props;
-    const state = useReactive({
-        value,
-        safeValue: undefined,
-    });
+    const [timeValue, setTimeValue] = useState(value);
+    const [safeValue, setSafeValue] = useState(undefined);
     const [active, setActive] = useState(false);
     const handleChange = (v) => {
-        state.value = v;
+        setTimeValue(v);
     };
     const handleFallback = (v) => {
-        state.safeValue = v;
+        setSafeValue(v);
     };
     const handleValidTime = () => {
-        if (!state.value)
+        if (!timeValue)
             return;
-        state.value = state.safeValue;
-        handleChange(state.safeValue);
+        setTimeValue(safeValue);
     };
     const handleBlur = (e) => {
         onBlur?.(e);
@@ -3776,9 +4040,9 @@ function TimePicker(props) {
         setActive(v);
     };
     useEffect(() => {
-        state.value = value;
+        setTimeValue(value);
     }, [value]);
-    return (jsx(Popup, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', watchResize: true, ...popupProps, onVisibleChange: handleVisibleChange, content: jsx(Panel, { value: state.value, format: format, periods: periods, renderItem: renderItem, onChange: handleChange, onFallback: handleFallback }), children: jsx(Input, { value: state.value, placeholder: placeholder, append: jsx(Icon, { icon: jsx(AccessTimeRound, {}), className: 'i-timepicker-icon', size: '1em' }), onChange: handleChange, onBlur: handleBlur, className: classNames("i-timepicker-label", className), ...restProps }) }));
+    return (jsx(Popup, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', ...popupProps, onVisibleChange: handleVisibleChange, content: jsx(Panel, { value: timeValue, format: format, periods: periods, renderItem: renderItem, onChange: handleChange, onFallback: handleFallback }), children: jsx(Input, { value: timeValue, placeholder: placeholder, append: jsx(Icon, { icon: jsx(AccessTimeRound, {}), className: 'i-timepicker-icon', size: '1em' }), onChange: handleChange, onBlur: handleBlur, className: classNames("i-timepicker-label", className), ...restProps }) }));
 }
 
 const defaultOk = {
@@ -3789,7 +4053,7 @@ const defaultCancel = {
     secondary: true,
 };
 const Popconfirm = (props) => {
-    const { trigger = "click", visible, icon = jsx(Icon, { icon: jsx(InfoOutlined, {}), className: 'error', size: '1.2em' }), content, okButtonProps, cancelButtonProps, children, align = "end", 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,
@@ -3838,16 +4102,14 @@ function RadioItem(props) {
 
 function Radio(props) {
     const { label, name, options, value, type = "default", status = "normal", message, optionInline = true, labelInline, disabled, required, className, renderItem, onChange, } = props;
-    const state = useReactive({
-        value,
-    });
+    const [selectedValue, setSelectedValue] = useState(value);
     const formattedOptions = useMemo(() => formatOption(options), [options]);
     const handleChange = (value, e) => {
-        state.value = value;
+        setSelectedValue(value);
         onChange?.(value, e);
     };
     useEffect(() => {
-        state.value = value;
+        setSelectedValue(value);
     }, [value]);
     return (jsxs("div", { className: classNames("i-radio i-input-label", {
             [`i-radio-${status}`]: status !== "normal",
@@ -3856,7 +4118,7 @@ function Radio(props) {
                     "i-options-block": !optionInline,
                     "i-radio-options-button": type === "button",
                 }), children: formattedOptions.map((option) => {
-                    const checked = state.value === option.value;
+                    const checked = selectedValue === option.value;
                     return (jsx(RadioItem, { name: name, value: option.value, checked: checked, type: type, disabled: disabled || option.disabled, onChange: handleChange, children: renderItem ?? option.label }, option.value));
                 }) })] }));
 }
@@ -4313,25 +4575,23 @@ const Tabs = ((props) => {
     const barRef = useRef(null);
     const navsRef = useRef(null);
     const contentsRef = useRef(new Map());
-    const state = useReactive({
-        active,
-        prevActive: undefined,
-        barStyle: {},
-        cachedTabs: [],
-        overflow: false,
-        more: [],
-        tabs: [],
-    });
+    const [activeKey, setActiveKey] = useState(active);
+    const [prevActiveKey, setPrevActiveKey] = useState(undefined);
+    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);
     useEffect(() => {
         contentsRef.current.clear();
         if (!items) {
             if (!children) {
-                state.tabs = [];
+                setTabs([]);
                 return;
             }
-            state.tabs = Children.map(children, (node, i) => {
+            setTabs(Children.map(children, (node, i) => {
                 const { key, props: nodeProps } = node;
                 const { title, children: tabChildren, content, keepDOM, closable, } = nodeProps;
                 const tabKey = String(key ?? i);
@@ -4342,10 +4602,10 @@ const Tabs = ((props) => {
                     keepDOM,
                     closable,
                 };
-            });
+            }) ?? []);
             return;
         }
-        state.tabs = items.map((item, i) => {
+        setTabs(items.map((item, i) => {
             if (["string", "number"].includes(typeof item)) {
                 const key = String(item);
                 return { key, title: item };
@@ -4357,90 +4617,99 @@ const Tabs = ((props) => {
                 ...rest,
                 key,
             };
-        });
+        }));
     }, [children, items]);
     const add = (tab) => {
-        const tkey = String(tab.key ?? state.tabs.length);
-        const i = state.tabs.findIndex((t) => t.key === tkey);
+        const tkey = String(tab.key ?? tabs.length);
+        const i = tabs.findIndex((t) => t.key === tkey);
         if (i > -1) {
-            open(state.tabs[i].key ?? `${i}`);
+            open(tabs[i].key ?? `${i}`);
             return;
         }
         contentsRef.current.set(tkey, tab.content);
         const { content, ...rest } = tab;
-        state.tabs.push({ ...rest, key: tkey });
+        setTabs((ts) => [...ts, { ...rest, key: tkey }]);
         open(tkey);
     };
     const close = (key) => {
-        const i = state.tabs.findIndex((t) => t.key === key);
+        const i = tabs.findIndex((t) => t.key === key);
         if (i < 0)
             return;
         contentsRef.current.delete(key);
-        state.tabs.splice(i, 1);
-        if (state.active !== key)
+        const nextTabs = [...tabs];
+        nextTabs.splice(i, 1);
+        setTabs(nextTabs);
+        if (activeKey !== key)
             return;
-        const next = state.tabs[i] || state.tabs[i - 1];
-        open(state.prevActive ?? next?.key ?? "");
+        const next = nextTabs[i] || nextTabs[i - 1];
+        open(prevActiveKey ?? next?.key ?? "");
     };
     const open = (key) => {
-        if (key === state.active) {
+        if (key === activeKey) {
             if (!toggable)
                 return;
             onTabChange?.(undefined, key);
-            state.active = undefined;
-            state.barStyle = {
+            setActiveKey(undefined);
+            setBarStyle({
                 height: 0,
                 width: 0,
-            };
+            });
             return;
         }
-        state.prevActive = state.active;
-        onTabChange?.(key, state.active);
-        state.active = key;
+        setPrevActiveKey(activeKey);
+        onTabChange?.(key, activeKey);
+        setActiveKey(key);
     };
     useEffect(() => {
         if (!size || hideMore || !observe)
             return;
         const { scrollHeight, scrollWidth } = navsRef.current;
         const { width, height } = size;
-        state.overflow = scrollHeight > height || scrollWidth > width;
-        if (!state.overflow)
+        const nextOverflow = scrollHeight > height || scrollWidth > width;
+        setOverflow(nextOverflow);
+        if (!nextOverflow)
             return;
         navRefs.current.map((nav, i) => {
             if (!nav)
                 return;
             observe(nav, (tar, visible) => {
-                if (!state.tabs[i])
-                    return;
-                state.tabs[i].intersecting = visible;
-                state.more = state.tabs.filter((tab) => !tab.intersecting);
+                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;
+                });
             });
         });
-    }, [size, hideMore, state.tabs.length]);
+    }, [size, hideMore, tabs.length, observe]);
     useEffect(() => {
-        if (!bar || type === "pane" || state.active === undefined) {
+        if (!bar || type === "pane" || activeKey === undefined) {
             return;
         }
-        const index = state.tabs.findIndex((tab) => tab.key === state.active);
+        const index = tabs.findIndex((tab) => tab.key === activeKey);
         setTimeout(() => {
             const nav = navRefs.current[index];
             if (!nav)
                 return;
-            if (state.tabs[index].keepDOM && state.active) {
-                const i = state.cachedTabs.findIndex((k) => k === state.active);
-                i < 0 && state.cachedTabs.unshift(state.active);
+            if (tabs[index]?.keepDOM && activeKey) {
+                setCachedTabs((keys) => {
+                    if (keys.includes(activeKey))
+                        return keys;
+                    return [activeKey, ...keys];
+                });
             }
             const { offsetHeight, offsetLeft, offsetTop, offsetWidth } = nav;
             const isLine = type === "line";
-            state.barStyle = {
+            setBarStyle({
                 height: !vertical && isLine ? ".25em" : offsetHeight,
                 width: vertical && isLine ? ".25em" : offsetWidth,
                 transform: `translate(${offsetLeft}px, ${offsetTop}px)`,
-            };
+            });
         }, 16);
-    }, [state.active, bar, size]);
+    }, [activeKey, bar, size, tabs, type, vertical]);
     useEffect(() => {
-        if (active === undefined || state.active === active)
+        if (active === undefined || activeKey === active)
             return;
         open(active);
     }, [active]);
@@ -4450,7 +4719,7 @@ const Tabs = ((props) => {
         return () => {
             navRefs.current?.map(unobserve);
         };
-    }, [state.tabs.length]);
+    }, [tabs.length, hideMore, unobserve]);
     useEffect(() => {
         if (!navsRef.current || vertical)
             return;
@@ -4480,26 +4749,26 @@ const Tabs = ((props) => {
     }));
     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: [state.tabs.map((tab, i) => {
+                }), children: [prepend, jsxs("div", { ref: navsRef, className: classNames("i-tab-navs", `justify-${navsJustify}`), children: [tabs.map((tab, i) => {
                                 const { title, key = `${i}`, closable } = tab;
                                 return (jsxs("a", { ref: (ref) => (navRefs.current[i] = ref), className: classNames("i-tab-nav", {
-                                        "i-tab-active": state.active === key,
+                                        "i-tab-active": activeKey === key,
                                     }), onClick: () => open(key), children: [title, closable && (jsx(Helpericon, { as: 'i', active: true, className: 'i-tab-nav-close', onClick: (e) => {
                                                 e.stopPropagation();
                                                 close(key);
                                             } }))] }, key));
-                            }), bar && (jsx("span", { ref: barRef, className: classNames("i-tab-navs-bar", barClass), style: state.barStyle }))] }), !hideMore && state.overflow && state.more.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: state.more.map((tab, i) => {
+                            }), 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 = state.active === key;
+                                const isActive = activeKey === key;
                                 return (jsx("a", { className: classNames("i-tab-nav", {
                                         "i-tab-active": isActive,
                                     }), onClick: () => open(key), children: title }, key));
-                            }) }), children: renderMore(state.more) })), append] }), jsx("div", { className: 'i-tab-contents', children: state.tabs.map((tab, i) => {
+                            }) }), 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 = state.active === key;
+                    const isActive = activeKey === key;
                     const show = isActive ||
-                        (key !== undefined && state.cachedTabs.includes(key));
+                        (key !== undefined && cachedTabs.includes(key));
                     return (show && (jsx("div", { className: classNames("i-tab-content", {
                             "i-tab-active": isActive,
                         }), children: content }, key)));
@@ -4578,14 +4847,12 @@ const defaultNodeProps = {
 };
 const Tree = (props) => {
     const { data = [], ref, selected, checked = [], disabledRelated, nodeProps, onItemSelect, onItemCheck, ...restProps } = props;
-    const state = useReactive({
-        selected,
-        checked,
-        partofs: {},
-        nodeMaps: new Map(),
-    });
+    const [selectedKey, setSelectedKey] = useState(selected);
+    const [checkedKeys, setCheckedKeys] = useState(checked);
+    const [partofs, setPartofs] = useState({});
+    const nodeMapsRef = useRef(new Map());
     const oNodeProps = Object.assign({}, defaultNodeProps, nodeProps);
-    const isChecked = (key) => state.checked.includes(key || "");
+    const isChecked = (key) => checkedKeys.includes(key || "");
     const checkItem = (item, checked, direction) => {
         const { key = "", parent, children } = item;
         const shouldChanged = { [key]: checked };
@@ -4637,29 +4904,30 @@ const Tree = (props) => {
     const handleCheck = (item, checked) => {
         const [shouldChanged, partofs] = checkItem(item, checked);
         const changedKeys = Object.keys(shouldChanged);
-        state.checked = checked
-            ? Array.from(new Set([...state.checked, ...changedKeys]))
-            : state.checked.filter((k) => !changedKeys.includes(k));
-        Object.assign(state.partofs, partofs);
-        onItemCheck?.(item, checked, state.checked);
+        const nextChecked = checked
+            ? Array.from(new Set([...checkedKeys, ...changedKeys]))
+            : checkedKeys.filter((k) => !changedKeys.includes(k));
+        setCheckedKeys(nextChecked);
+        setPartofs((p) => ({ ...p, ...partofs }));
+        onItemCheck?.(item, checked, nextChecked);
     };
     const handleSelect = (key, item) => {
         if (!props.selectable)
             return;
-        state.selected = key;
+        setSelectedKey(key);
         onItemSelect?.(key, item);
     };
     useEffect(() => {
         if (selected === undefined)
             return;
-        state.selected = selected;
+        setSelectedKey(selected);
     }, [selected]);
     useEffect(() => {
-        state.nodeMaps.clear();
+        nodeMapsRef.current.clear();
         const { key, children } = oNodeProps;
         const recursive = (nodes) => {
             nodes.map((o) => {
-                state.nodeMaps.set(o[key], o);
+                nodeMapsRef.current.set(o[key], o);
                 o[children]?.length > 0 && recursive(o[children]);
             });
         };
@@ -4669,22 +4937,22 @@ const Tree = (props) => {
         return {
             getChecked: () => {
                 const items = [];
-                state.checked.map((k) => {
-                    const item = state.nodeMaps.get(k);
+                checkedKeys.map((k) => {
+                    const item = nodeMapsRef.current.get(k);
                     items.push(item);
                 });
-                return [state.checked, items];
+                return [checkedKeys, items];
             },
             getSelected: () => {
-                const item = state.nodeMaps.get(state.selected);
-                return [state.selected, item];
+                const item = nodeMapsRef.current.get(selectedKey);
+                return [selectedKey, item];
             },
             getPartofs: () => {
                 const items = [];
-                const keys = Object.keys(state.partofs).filter((k) => {
-                    const indeterminate = state.partofs[k];
+                const keys = Object.keys(partofs).filter((k) => {
+                    const indeterminate = partofs[k];
                     if (indeterminate) {
-                        const item = state.nodeMaps.get(k);
+                        const item = nodeMapsRef.current.get(k);
                         items.push(item);
                     }
                     return indeterminate;
@@ -4693,7 +4961,7 @@ const Tree = (props) => {
             },
         };
     });
-    return (jsx(TreeList, { data: data, selected: state.selected, checked: state.checked, partofs: state.partofs, nodeProps: oNodeProps, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
+    return (jsx(TreeList, { data: data, selected: selectedKey, checked: checkedKeys, partofs: partofs, nodeProps: oNodeProps, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
 };
 
 const ListContainer = (props) => {
@@ -4746,12 +5014,8 @@ const FileListItem = (props) => {
 
 const Upload = (props) => {
     const { ref, label, labelInline, value, files = [], initialFiles, placeholder, status = "normal", message, className, style, children, defaultButtonProps, mode = "default", cardSize = "4em", disabled, sortable, limit = props.multiple ? Infinity : 1, multiple, renderItem, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, ...restProps } = props;
-    const state = useReactive({
-        files,
-        value,
-        status,
-        message,
-    });
+    const [fileList, setFileListState] = useState(files);
+    const [uploadMessage, setUploadMessage] = useState(message);
     const inputRef = useRef(null);
     const preview = usePreview();
     const defBtnProps = Object.assign({
@@ -4769,7 +5033,7 @@ const Upload = (props) => {
     }, [mode, children]);
     const handleChange = (e) => {
         const files = Array.from(e.target.files || []);
-        const { files: before } = state;
+        const before = fileList;
         const changed = [];
         files.map((f) => {
             const { id, name, size, type } = f;
@@ -4786,21 +5050,20 @@ const Upload = (props) => {
             !same && changed.push(f);
         });
         const after = [...before, ...changed];
-        Object.assign(state, {
-            files: multiple ? after.slice(0, limit) : [after.at(-1)],
-            status,
-            message,
-        });
-        onFilesChange?.(state.files, changed, e);
-        onChange?.(state.files, e);
+        const last = after.at(-1);
+        const nextFiles = multiple ? after.slice(0, limit) : last ? [last] : [];
+        setFileListState(nextFiles);
+        setUploadMessage(message);
+        onFilesChange?.(nextFiles, changed, e);
+        onChange?.(nextFiles, e);
         handleUpload(changed);
         inputRef.current && (inputRef.current.value = "");
     };
     const handleRemove = (i) => {
-        const [...files] = state.files;
+        const [...files] = fileList;
         const changed = files.splice(i, 1);
         URL.revokeObjectURL(changed[0]?.src || "");
-        state.files = files;
+        setFileListState(files);
         onFilesChange?.(files, changed);
         onChange?.(files);
         inputRef.current && (inputRef.current.value = "");
@@ -4813,44 +5076,43 @@ const Upload = (props) => {
         return onUpload?.(result);
     };
     const handlePreview = (i) => {
-        preview({ items: state.files, initial: i });
+        preview({ items: fileList, initial: i });
     };
     const setFileList = (files) => {
         if (!files)
             return;
-        state.files = files.map((f) => {
-            return { ...f, id: f.id ?? uid(7) };
-        });
+        setFileListState(files.map((f) => {
+            const file = f;
+            return { ...file, id: file.id ?? uid(7) };
+        }));
     };
     const handleSortEnd = (before, after) => {
-        const [...files] = state.files;
-        state.files = arrayMove(files, before, after);
-        onChange?.(state.files);
+        const [...files] = fileList;
+        const nextFiles = arrayMove(files, before, after);
+        setFileListState(nextFiles);
+        onChange?.(nextFiles);
     };
     useEffect(() => {
-        Object.assign(state, {
-            status,
-            message,
-        });
+        setUploadMessage(message);
     }, [status, message]);
     useEffect(() => {
-        state.files = value?.filter?.((file) => !!file.id) ?? [];
+        setFileListState(value?.filter?.((file) => !!file.id) ?? []);
     }, [value]);
     useEffect(() => {
         setFileList(initialFiles);
     }, []);
     useImperativeHandle(ref, () => ({
-        getFileList: () => state.files,
+        getFileList: () => fileList,
         setFileList,
-    }), []);
+    }), [fileList]);
     return (jsx(InputContainer, { as: 'div', label: label, labelInline: labelInline, className: classNames("i-input-label-file", className), style: style, children: jsxs("div", { className: classNames("i-upload-inner", {
                 [`i-upload-${mode}`]: mode !== "default",
-            }), style: { ["--upload-card-size"]: cardSize }, children: [jsx(ListContainer, { sortable: sortable, onSortEnd: handleSortEnd, children: state.files.map((file, i) => {
+            }), style: { ["--upload-card-size"]: cardSize }, children: [jsx(ListContainer, { sortable: sortable, onSortEnd: handleSortEnd, children: fileList.map((file, i) => {
                         const node = (jsx(FileListItem, { index: i, file: file, mode: mode, renderItem: renderItem, onRemove: handleRemove, onPreview: handlePreview }, i));
                         if (!sortable)
                             return node;
                         return jsx(SortableItem, { children: node }, i);
-                    }) }), state.message && (jsx("span", { className: 'i-upload-message', children: state.message })), state.files.length < limit && (jsxs("label", { children: [jsx("input", { ...restProps, disabled: disabled, ref: inputRef, type: 'file', className: 'i-input-file-hidden', multiple: multiple, onChange: handleChange }), trigger] }))] }) }));
+                    }) }), uploadMessage && (jsx("span", { className: 'i-upload-message', children: uploadMessage })), fileList.length < limit && (jsxs("label", { children: [jsx("input", { ...restProps, disabled: disabled, ref: inputRef, type: 'file', className: 'i-input-file-hidden', multiple: multiple, onChange: handleChange }), trigger] }))] }) }));
 };
 
 const useTheme = (props) => {