@ioca/react 1.5.17 → 1.5.19

package/lib/index.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { debounce, uid, crush, throttle } from 'radash';
 import { useState, useRef, useEffect, useCallback, useMemo, Children, cloneElement, createElement, isValidElement, memo, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, useContext, createContext, useImperativeHandle } from 'react';
-import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, MoveToInboxTwotone, OutboxTwotone, FilePresentOutlined, DriveFolderUploadOutlined } from '@ricons/material';
+import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, KeyboardArrowDownRound, MoveToInboxTwotone, OutboxTwotone, FilePresentOutlined, DriveFolderUploadOutlined } from '@ricons/material';
 import { createRoot } from 'react-dom/client';
 import { getScrollbarSize, List as List$2 } from 'react-window';
 import { createPortal } from 'react-dom';
@@ -135,12 +135,15 @@ function useMouseUp(listener, options) {
 }
 function useKeydown(listener, options) {
     initEventsOnce();
+    const listenerRef = useRef(listener);
+    listenerRef.current = listener;
     useEffect(() => {
         if (options?.disabled)
             return;
-        KeydownEvents.add(listener);
+        const handler = (e) => listenerRef.current(e);
+        KeydownEvents.add(handler);
         return () => {
-            KeydownEvents.delete(listener);
+            KeydownEvents.delete(handler);
         };
     }, []);
 }
@@ -1785,7 +1788,7 @@ const List$1 = forwardRef((props, ref) => {
 });
 List$1.Item = Item$4;
 
-const Content$2 = forwardRef((props, ref) => {
+const Content$3 = forwardRef((props, ref) => {
     const { arrow, arrowProps = {}, className, children, ...restProps } = props;
     const arrowCSS = useMemo(() => {
         let { left = 0, top = 0, pos } = arrowProps;
@@ -2297,7 +2300,7 @@ function Popup(props) {
             window.removeEventListener("scroll", onScrollOrResize, true);
         };
     }, [show]);
-    return (jsxs(Fragment, { children: [triggerNode, show && (jsx(Content$2, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: {
+    return (jsxs(Fragment, { children: [triggerNode, show && (jsx(Content$3, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: {
                     ...style,
                     position: "fixed",
                 }, className: className, ...contentTouch, trigger: triggerRef.current, children: content }))] }));
@@ -2703,6 +2706,7 @@ const Editor = (props) => {
     const [memtionKeyword, setMemtionKeyword] = useState("");
     const [memtionActiveIndex, setMemtionActiveIndex] = useState(0);
     const [activeMemtionIndex, setActiveMemtionIndex] = useState(-1);
+    const activeMemtionIndexRef = useRef(-1);
     const memtionOptions = useMemo(() => {
         if (activeMemtionIndex < 0 || !memtion?.length)
             return [];
@@ -2838,6 +2842,7 @@ const Editor = (props) => {
                 memtionTriggerRangeRef.current =
                     selectionRef.current?.cloneRange() ?? null;
                 pendingMemtionRef.current = true;
+                activeMemtionIndexRef.current = matchedIndex;
                 setActiveMemtionIndex(matchedIndex);
             }
         }
@@ -2887,8 +2892,8 @@ const Editor = (props) => {
             setEditorValue(nextValue);
         }
         rememberSelection();
-        if (activeMemtionIndex >= 0 && (pendingMemtionRef.current || memtionVisible)) {
-            const active = memtion?.[activeMemtionIndex];
+        if (activeMemtionIndexRef.current >= 0 && (pendingMemtionRef.current || memtionVisible)) {
+            const active = memtion?.[activeMemtionIndexRef.current];
             if (!active) {
                 hideMemtion();
                 return;
@@ -3261,14 +3266,21 @@ Form.useForm = useForm;
 Form.Field = Field;
 Form.useConfig = useConfig;
 
-function Content$1(props) {
+const Content$1 = (props) => {
     const { title, footer, hideCloseButton, footerLeft, okButtonProps, cancelButtonProps, children, onOk, onClose, } = props;
     const showHeader = title || !hideCloseButton;
+    const [loading, setLoading] = useState(false);
     const handleOk = async () => {
-        const ret = await onOk?.();
-        if (ret === false)
-            return;
-        onClose?.();
+        setLoading(true);
+        try {
+            const ret = await onOk?.();
+            if (ret === false)
+                return;
+            onClose?.();
+        }
+        finally {
+            setLoading(false);
+        }
     };
     const renderFooter = useMemo(() => {
         if (footer || footer === null)
@@ -3276,19 +3288,94 @@ function Content$1(props) {
         const propsOk = Object.assign({
             children: "确定",
             onClick: handleOk,
-        }, okButtonProps);
+        }, okButtonProps, { loading });
         const propsCancel = Object.assign({
             secondary: true,
             children: "关闭",
             onClick: onClose,
         }, cancelButtonProps);
         return (jsxs(Fragment, { children: [footerLeft, jsx(Button, { ...propsOk }), jsx(Button, { ...propsCancel })] }));
-    }, [footer, okButtonProps, cancelButtonProps]);
+    }, [footer, okButtonProps, cancelButtonProps, loading]);
     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 })] }));
-}
+};
+var Content$2 = memo(Content$1);
 
 const ModalContext = createContext(false);
 
+const CONTAINER_ID = "i-modal-container";
+const BACKDROP_ID = "i-modal-backdrop";
+let containerEl = null;
+let backdropEl = null;
+const stack = [];
+const listeners = new Set();
+function ensureContainer() {
+    if (containerEl)
+        return containerEl;
+    containerEl = document.createElement("div");
+    containerEl.id = CONTAINER_ID;
+    containerEl.className = "i-modal-container";
+    document.body.append(containerEl);
+    backdropEl = document.createElement("div");
+    backdropEl.id = BACKDROP_ID;
+    backdropEl.className = "i-modal-backdrop";
+    containerEl.prepend(backdropEl);
+    return containerEl;
+}
+function syncBackdrop() {
+    if (!backdropEl)
+        return;
+    const show = stack.some((e) => e.visible && !e.hideBackdrop);
+    backdropEl.classList.toggle("i-modal-backdrop-active", show);
+}
+function notify$1() {
+    listeners.forEach((fn) => fn());
+}
+function register(entry) {
+    ensureContainer();
+    stack.push(entry);
+    syncBackdrop();
+    notify$1();
+    return () => {
+        const idx = stack.findIndex((e) => e.mid === entry.mid);
+        if (idx !== -1)
+            stack.splice(idx, 1);
+        syncBackdrop();
+        notify$1();
+        if (stack.length === 0) {
+            backdropEl?.remove();
+            backdropEl = null;
+            containerEl?.remove();
+            containerEl = null;
+        }
+    };
+}
+function updateVisible(mid, visible) {
+    const entry = stack.find((e) => e.mid === mid);
+    if (entry) {
+        entry.visible = visible;
+        syncBackdrop();
+        notify$1();
+    }
+}
+function isTop(mid) {
+    const top = getTopVisible();
+    return top?.mid === mid;
+}
+function getTopVisible() {
+    for (let i = stack.length - 1; i >= 0; i--) {
+        if (stack[i].visible)
+            return stack[i];
+    }
+    return undefined;
+}
+function getContainer() {
+    return ensureContainer();
+}
+function subscribe(fn) {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+}
+
 function useModal() {
     const ref = useRef(null);
     const handleOpen = (props) => {
@@ -3316,26 +3403,41 @@ function useModal() {
     };
 }
 
+let midCounter = 0;
 function Modal(props) {
     const { visible, title, footer, okButtonProps, cancelButtonProps, closable = true, hideBackdrop, backdropClosable = true, hideCloseButton, disableEsc, width, height, customized, fixed, hideShadow, children, style, className, keepDOM, footerLeft, onClick, onVisibleChange, onClose, onOk, ...restProps } = props;
+    const midRef = useRef(`modal-${++midCounter}`);
+    const mid = midRef.current;
     const [show, setShow] = useState(visible);
     const [active, setActive] = useState(false);
     const [bounced, setBounced] = useState(false);
     const [mounted, setMounted] = useState(false);
+    const [top, setTop] = useState(false);
     const toggable = useRef(true);
-    const handleShow = async () => {
+    const layerRef = useRef(null);
+    const handleShow = useCallback(() => {
         if (!toggable.current)
             return;
-        (!keepDOM || !show) && setShow(true);
+        if (!keepDOM || !show)
+            setShow(true);
         toggable.current = false;
-        const timer = setTimeout(() => {
+        updateVisible(mid, true);
+        const raf = requestAnimationFrame(() => {
+            if (!layerRef.current) {
+                requestAnimationFrame(() => {
+                    setActive(true);
+                    onVisibleChange?.(true);
+                    toggable.current = true;
+                });
+                return;
+            }
             setActive(true);
             onVisibleChange?.(true);
             toggable.current = true;
-        }, 64);
-        return () => clearTimeout(timer);
-    };
-    const handleHide = () => {
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [keepDOM, show, onVisibleChange]);
+    const handleHide = useCallback(() => {
         if (!toggable.current)
             return;
         toggable.current = false;
@@ -3348,28 +3450,53 @@ function Modal(props) {
             return () => clearTimeout(timer);
         }
         setActive(false);
+        updateVisible(mid, false);
         const timer = setTimeout(() => {
-            !keepDOM && setShow(false);
+            if (!keepDOM)
+                setShow(false);
             toggable.current = true;
             onVisibleChange?.(false);
             onClose?.();
         }, 240);
         return () => clearTimeout(timer);
-    };
+    }, [closable, keepDOM, onClose, onVisibleChange]);
     const handleBackdropClick = () => {
         backdropClosable && handleHide();
     };
-    useKeydown((e) => {
-        if (e.code !== "Escape" || !visible)
-            return;
-        handleHide();
-    }, { disabled: disableEsc });
+    useEffect(() => {
+        const unsub = subscribe(() => {
+            setTop(isTop(mid));
+        });
+        return unsub;
+    }, []);
+    useEffect(() => {
+        const unregister = register({
+            mid,
+            visible: !!visible,
+            hideBackdrop: !!hideBackdrop,
+            closable: !!closable,
+        });
+        return unregister;
+    }, []);
     useEffect(() => {
         visible ? handleShow() : handleHide();
     }, [visible]);
+    useEffect(() => {
+        if (!show)
+            return;
+        const raf = requestAnimationFrame(() => {
+            setActive(top);
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [top]);
     useEffect(() => {
         setMounted(true);
     }, []);
+    useKeydown((e) => {
+        if (e.code !== "Escape" || !visible || !top)
+            return;
+        handleHide();
+    }, { disabled: disableEsc });
     const handleClick = () => {
         if (typeof document === "undefined")
             return;
@@ -3377,12 +3504,12 @@ function Modal(props) {
     };
     if (!show || !mounted)
         return null;
-    return createPortal(jsx("div", { className: classNames("i-modal-container", {
-            "i-modal-backdrop": !hideBackdrop,
-            "i-modal-customized": customized,
+    return createPortal(jsx("div", { ref: layerRef, className: classNames("i-modal-layer", {
             "i-modal-active": active,
+            "i-modal-customized": customized,
+            "i-modal-hide-backdrop": hideBackdrop,
             fixed,
-        }, className), style: style, onClick: handleBackdropClick, "aria-modal": 'true', inert: !active, children: jsx("div", { className: classNames("i-modal", {
+        }, className), style: style, onClick: handleBackdropClick, children: jsx("div", { className: classNames("i-modal", {
                 bounced,
                 shadow: !hideShadow,
             }), style: {
@@ -3392,7 +3519,7 @@ function Modal(props) {
                 e.stopPropagation();
                 handleClick();
                 onClick?.(e);
-            }, role: 'dialog', "aria-labelledby": title ? "modal-title" : undefined, ...restProps, children: jsxs(ModalContext.Provider, { value: true, children: [customized && children, !customized && (jsx(Content$1, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }) }), document?.body ?? null);
+            }, role: "dialog", "aria-modal": top, "data-mid": mid, ...restProps, children: jsxs(ModalContext.Provider, { value: true, children: [customized && children, !customized && (jsx(Content$2, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }) }), getContainer());
 }
 Modal.useModal = useModal;
 
@@ -4258,7 +4385,7 @@ const Textarea = (props) => {
         onKeyDown: handleKeydown,
         ...restProps,
     };
-    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: { width, ...style }, tip: message ?? tip, status: status, children: jsx("div", { className: classNames("i-input-item", {
+    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: classNames("i-textarea-label", className), style: { width, ...style }, tip: message ?? tip, status: status, children: jsx("div", { className: classNames("i-input-item", {
                 [`i-input-${status}`]: status !== "normal",
                 "i-input-borderless": !border,
             }), children: jsx("textarea", { ...inputProps }) }) }));
@@ -4317,11 +4444,13 @@ const Input = ((props) => {
     }, [type]);
     const clearable = clear && inputValue;
     const showHelper = type === "password" && !!inputValue;
+    const isClearBtn = clearable && !showHelper;
     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-clearable": clearable,
                 [`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 && 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 })] }) }));
+            }), 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, className: classNames({ "i-helpericon-clear": isClearBtn }), onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
 });
 Input.Textarea = Textarea;
 Input.Number = Number$1;
@@ -4332,13 +4461,13 @@ const AlignMap = {
     center: "center",
     right: "flex-end",
 };
-const GlobalConfig = {
+const ContainerConfig = {
+    align: "center",
+    fromBottom: false,
+    unshift: false,
     gap: 12,
-};
-const ItemDefaultConfig = {
+    offset: "12px",
     duration: 3000,
-    closable: true,
-    active: false,
 };
 const handler = {
     oneInstance: null,
@@ -4355,12 +4484,12 @@ const heights = {
     center: [],
     right: [],
 };
-const MessageItem = function ({ ref, active, content, top, className, style, onClick, }) {
+const MessageItem = function ({ ref, active, content, top, bottom, className, style, onClick, }) {
     return (jsx("div", { ref: ref, className: classNames("i-message", className, {
             "i-message-active": active,
         }), style: {
             ...style,
-            top,
+            ...(bottom !== undefined ? { bottom } : { top }),
         }, onClick: onClick, children: content }));
 };
 function Messages() {
@@ -4377,26 +4506,32 @@ function Messages() {
             right: [],
         },
     });
-    const offsetTop = {
-        left: 0,
-        center: 0,
-        right: 0,
-    };
     useEffect(() => {
         Object.assign(handler, {
             callout: function (item) {
                 const { align = "center", unshift, onShow } = item;
-                const size = queue[align][unshift ? "unshift" : "push"](item);
+                queue[align][unshift ? "unshift" : "push"](item);
                 state.items[align] = [...queue[align]];
                 item.close = this.close.bind(item);
-                setTimeout(() => {
+                // Pre-fill 0-height placeholder so heights stays index-aligned with queue
+                if (unshift) {
+                    heights[align].unshift(0);
+                }
+                else {
+                    heights[align].push(0);
+                }
+                state.tops[align] = [...heights[align]];
+                requestAnimationFrame(() => {
                     const h = ref.current?.offsetHeight || 0;
-                    queue[align][unshift ? 0 : size - 1].active = true;
+                    const idx = queue[align].findIndex((i) => i.id === item.id);
+                    if (idx < 0)
+                        return;
+                    queue[align][idx].active = true;
                     state.items[align] = [...queue[align]];
-                    heights[align][unshift ? "unshift" : "push"](h);
+                    heights[align][idx] = h;
                     state.tops[align] = [...heights[align]];
                     onShow?.();
-                }, 12);
+                });
                 if (item.duration !== 0) {
                     item.timer = setTimeout(() => {
                         this.close.call(item);
@@ -4423,36 +4558,65 @@ function Messages() {
             },
         });
     }, []);
-    const renderItems = (item, i) => {
-        if (!item)
-            return jsx(Fragment, {});
-        const { id, active, content, align = "center", className } = item;
-        offsetTop[align] += state.tops[align][i - 1] || 0;
-        const top = GlobalConfig.gap * i + offsetTop[align];
-        return (jsx(MessageItem, { ref: ref, active: active, content: content, top: top, className: className, style: { alignSelf: AlignMap[align] }, onClick: handler.close.bind(item) }, id));
-    };
-    return (jsxs("div", { className: 'i-messages', children: [state.items.left.map(renderItems), state.items.center.map(renderItems), state.items.right.map(renderItems)] }));
+    const renderGroup = (align) => {
+        const items = state.items[align];
+        const tops = state.tops[align];
+        const gap = ContainerConfig.gap;
+        if (ContainerConfig.fromBottom) {
+            // bottom-up: calculate bottom-edge positions
+            let offset = 0;
+            const bottoms = [];
+            for (let i = items.length - 1; i >= 0; i--) {
+                bottoms[i] = offset;
+                offset += (tops[i] || 0) + gap;
+            }
+            return items.map((item, i) => {
+                if (!item)
+                    return jsx(Fragment, {});
+                const { id, active, content, className, style: itemStyle } = item;
+                return (jsx(MessageItem, { ref: ref, active: active, content: content, bottom: bottoms[i], className: className, style: {
+                        ...itemStyle,
+                        alignSelf: AlignMap[align],
+                    }, onClick: handler.close.bind(item) }, id));
+            });
+        }
+        // top-down (default)
+        let offset = 0;
+        return items.map((item, i) => {
+            if (!item)
+                return jsx(Fragment, {});
+            const { id, active, content, className, style: itemStyle } = item;
+            const top = offset;
+            offset += (tops[i] || 0) + gap;
+            return (jsx(MessageItem, { ref: ref, active: active, content: content, top: top, className: className, style: {
+                    ...itemStyle,
+                    alignSelf: AlignMap[align],
+                }, onClick: handler.close.bind(item) }, id));
+        });
+    };
+    return (jsxs("div", { className: "i-messages", style: {
+            margin: ContainerConfig.offset,
+        }, children: [renderGroup("left"), renderGroup("center"), renderGroup("right")] }));
 }
 function message(config) {
-    if (["string", "number"].includes(typeof config) ||
-        isValidElement(config)) {
+    if (typeof config !== "object" || isValidElement(config)) {
         config = { content: config };
     }
-    config = Object.assign({ id: uid(7) }, ItemDefaultConfig, config);
-    handler.callout(config);
+    const msg = {
+        id: uid(7),
+        active: false,
+        align: ContainerConfig.align,
+        duration: ContainerConfig.duration,
+        closable: true,
+        unshift: ContainerConfig.unshift,
+        ...config,
+    };
+    handler.callout(msg);
     return {
-        instance: config,
-        close: handler.close.bind(config),
+        instance: msg,
+        close: handler.close.bind(msg),
     };
 }
-function createContainer() {
-    if (typeof document === "undefined")
-        return null;
-    const container = document.createElement("div");
-    container.dataset.id = "messages";
-    document.body.append(container);
-    return container;
-}
 message.error = (content) => {
     return message({
         content,
@@ -4495,17 +4659,27 @@ message.one = (config) => {
         handler.oneInstance = instance;
     }
 };
-// 初始化消息容器
-let container = null;
-let root = null;
-if (typeof window !== "undefined") {
-    container = createContainer();
-    if (container) {
-        root = createRoot(container);
-        root.render(jsx(Messages, {}));
-    }
+function MessageContainer({ align = "center", fromBottom = false, unshift = false, gap = 12, offset = "12px", duration = 3000, }) {
+    ContainerConfig.align = align;
+    ContainerConfig.fromBottom = fromBottom;
+    ContainerConfig.unshift = unshift;
+    ContainerConfig.gap = gap;
+    ContainerConfig.offset = offset;
+    ContainerConfig.duration = duration;
+    return null;
+}
+// 默认 Portal 到 document.body（仅在客户端执行，避免 SSR 问题）
+if (typeof document !== "undefined") {
+    import('react-dom/client').then(({ createRoot }) => {
+        const container = document.createElement("div");
+        container.dataset.id = "messages";
+        document.body.append(container);
+        createRoot(container).render(jsx(Messages, {}));
+    });
 }
 
+const Message = Object.assign(message, { Container: MessageContainer });
+
 const Page = (props) => {
     const { page, active, disabled, children, onChange } = props;
     const [loading, setLoading] = useState(false);
@@ -4772,7 +4946,7 @@ function ColorPicker(props) {
 }
 
 const Dates = (props) => {
-    const { value, month, weeks = ["一", "二", "三", "四", "五", "六", "日"], renderDate = (date) => date.date(), disabledDate, onDateClick, } = props;
+    const { value, month, rangeEnd, hoverDate, weeks = ["一", "二", "三", "四", "五", "六", "日"], renderDate = (date) => date.date(), disabledDate, onDateClick, onDateHover, } = props;
     const today = dayjs();
     const dates = useMemo(() => {
         const dates = [];
@@ -4796,17 +4970,25 @@ const Dates = (props) => {
             return;
         onDateClick?.(date);
     };
-    return (jsxs(Fragment, { children: [jsx("div", { className: 'i-datepicker-weeks', children: weeks.map((week, i) => (jsx("span", { className: 'i-datepicker-week', children: week }, i))) }), jsx("div", { className: 'i-datepicker-dates', children: dates.map((date, i) => {
-                    const active = date.isSame(value, "day");
+    const handleMouseEnter = (date) => {
+        if (disabledDate?.(date))
+            return;
+        onDateHover?.(date);
+    };
+    return (jsxs(Fragment, { children: [jsx("div", { className: 'i-datepicker-weeks', children: weeks.map((week, i) => (jsx("span", { className: 'i-datepicker-week', children: week }, i))) }), jsx("div", { className: 'i-datepicker-dates', onMouseLeave: () => onDateHover?.(null), children: dates.map((date, i) => {
+                    const active = date.isSame(value, "day") || (rangeEnd && date.isSame(rangeEnd, "day"));
                     const isSameMonth = date.isSame(month, "month");
                     const isToday = date.isSame(today, "day");
                     const disabled = disabledDate?.(date);
+                    const isBetween = hoverDate && value && ((date.isAfter(value, "day") && date.isBefore(hoverDate, "day")) ||
+                        (date.isAfter(hoverDate, "day") && date.isBefore(value, "day")));
                     return (jsx("div", { className: classNames("i-datepicker-item", {
                             "i-datepicker-active": active,
                             "i-datepicker-same-month": isSameMonth,
                             "i-datepicker-today": isToday,
                             "i-datepicker-disabled": disabled,
-                        }), onClick: () => handleDateClick(date), children: renderDate(date) }, i));
+                            "i-daterange-between": isBetween,
+                        }), onMouseEnter: () => handleMouseEnter(date), onClick: () => handleDateClick(date), children: renderDate(date) }, i));
                 }) })] }));
 };
 
@@ -4816,20 +4998,20 @@ const YearMonth = (props) => {
     return (jsxs("a", { className: 'i-datepicker-action', "data-ripple": true, onClick: onClick, children: [jsx("span", { children: renderYear?.(value.year()) }), unitYear, jsx("span", { children: renderMonth?.(value.month() + 1) }), unitMonth] }));
 };
 const Panel$1 = (props) => {
-    const { value, unitYear, unitMonth, renderDate, renderMonth = (m) => m, renderYear = (y) => y, disabledDate, onDateClick, } = props;
+    const { value, month: controlledMonth, rangeEnd, hoverDate, onDateHover, onOperateMonth: onOperateMonthProp, unitYear, unitMonth, renderDate, renderMonth = (m) => m, renderYear = (y) => y, disabledDate, onDateClick, } = props;
     const [today, setToday] = useState(value);
-    const [month, setMonth] = useState(value || dayjs());
+    const [month, setMonth] = useState(controlledMonth || value || dayjs());
     const [selectedYear, setSelectedYear] = useState(dayjs());
     const [years, setYears] = useState([]);
     const [selectable, setSelectable] = useState(false);
     const $years = useRef(null);
-    const handleOperateMonth = (next) => {
+    const handleOperateMonth = onOperateMonthProp || ((next) => {
         setMonth((m) => m[next ? "add" : "subtract"](1, "month"));
-    };
+    });
     const handleChangeDate = (date) => {
         if (date.isSame(today, "day"))
             return;
-        if (!date.isSame(month, "month")) {
+        if (controlledMonth === undefined && !date.isSame(month, "month")) {
             setMonth(date);
         }
         setToday(date);
@@ -4853,27 +5035,40 @@ const Panel$1 = (props) => {
     }, [selectable, month]);
     useEffect(() => {
         setToday(value);
-        setMonth(value || dayjs());
-    }, [value]);
+        if (controlledMonth === undefined) {
+            setMonth(value || dayjs());
+        }
+    }, [value, controlledMonth]);
+    useEffect(() => {
+        const el = $years.current;
+        if (!el)
+            return;
+        const onWheel = (e) => {
+            e.preventDefault();
+            getMoreYears(e);
+        };
+        el.addEventListener("wheel", onWheel, { passive: false });
+        return () => el.removeEventListener("wheel", onWheel);
+    }, []);
     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();
                             setSelectable(false);
-                        } }), jsx("div", { ref: $years, className: 'i-datepicker-years', onWheel: getMoreYears, children: years.map((y) => (jsx("a", { className: classNames("i-datepicker-year", {
+                        } }), jsx("div", { ref: $years, className: 'i-datepicker-years', 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 === month.month() + 1,
                                 }), onClick: () => handleChangeMonth(m), children: renderMonth(m) }, m));
-                        }) })] }), jsx(Dates, { value: today, month: month, disabledDate: disabledDate, onDateClick: handleChangeDate, renderDate: renderDate })] }));
+                        }) })] }), jsx(Dates, { value: today, month: month, rangeEnd: rangeEnd, hoverDate: hoverDate, onDateHover: onDateHover, disabledDate: disabledDate, onDateClick: handleChangeDate, renderDate: renderDate })] }));
 };
 
 dayjs.extend(customParseFormat);
 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 { name, value, weeks, format = FORMAT$1, placeholder = props.format ?? FORMAT$1, className, renderDate, renderMonth, renderYear, popupProps, disabledDate, onDateClick, onChange, onBlur, clear, onClear: onClearProp, ...restProps } = props;
     const [inputValue, setInputValue] = useState(value);
     const [active, setActive] = useState(false);
     const dayJsValue = useMemo(() => {
@@ -4909,10 +5104,14 @@ const Datepicker = (props) => {
         popupProps?.onVisibleChange?.(v);
         setActive(v);
     };
+    const handleClear = () => {
+        setActive(false);
+        onClearProp?.();
+    };
     useEffect(() => {
         setInputValue(value);
     }, [value]);
-    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 }) }));
+    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, clear: clear, onClear: handleClear, onChange: handleChange, onBlur: handleBlur, onEnter: handleSetDate, className: classNames("i-datepicker-label", className), ...restProps }) }));
 };
 
 function Items(props) {
@@ -5021,7 +5220,7 @@ function Panel(props) {
 
 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 { name, value, format = FORMAT, periods, placeholder = props.format ?? FORMAT, className, renderItem, onChange, onBlur, popupProps, clear, onClear: onClearProp, ...restProps } = props;
     const [timeValue, setTimeValue] = useState(value);
     const [safeValue, setSafeValue] = useState(undefined);
     const [active, setActive] = useState(false);
@@ -5045,12 +5244,93 @@ function TimePicker(props) {
         popupProps?.onVisibleChange?.(v);
         setActive(v);
     };
+    const handleClear = () => {
+        setActive(false);
+        onClearProp?.();
+    };
     useEffect(() => {
         setTimeValue(value);
     }, [value]);
-    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 }) }));
+    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' }), clear: clear, onClear: handleClear, onChange: handleChange, onBlur: handleBlur, className: classNames("i-timepicker-label", className), ...restProps }) }));
 }
 
+const DoublePanel = (props) => {
+    const { value, weeks, unitYear, unitMonth, renderDate, renderMonth, renderYear, disabledDate, onSelected, } = props;
+    const [baseMonth, setBaseMonth] = useState(value?.[0] || dayjs());
+    const [startDate, setStartDate] = useState(value?.[0] || null);
+    const [endDate, setEndDate] = useState(value?.[1] || null);
+    const [selecting, setSelecting] = useState("start");
+    const [hoverDate, setHoverDate] = useState(null);
+    const nextMonth = useMemo(() => baseMonth.add(1, "month"), [baseMonth]);
+    useEffect(() => {
+        setStartDate(value?.[0] || null);
+        setEndDate(value?.[1] || null);
+        setBaseMonth(value?.[0] || dayjs());
+    }, [value]);
+    const handleDateClick = (date) => {
+        if (selecting === "start") {
+            setStartDate(date);
+            setSelecting("end");
+        }
+        else {
+            let start = startDate || date;
+            let end = date;
+            if (start.isAfter(end)) {
+                [start, end] = [end, start];
+            }
+            setEndDate(end);
+            setSelecting("start");
+            onSelected?.([start, end]);
+        }
+    };
+    const handleDateHover = (date) => {
+        if (selecting === "end" && startDate) {
+            setHoverDate(date);
+        }
+    };
+    const handleOperateMonth = (next) => {
+        setBaseMonth((m) => m[next ? "add" : "subtract"](1, "month"));
+    };
+    return (jsxs("div", { className: 'i-daterange-panel i-daterange-grids', children: [jsx("div", { className: 'i-daterange-col', children: jsx(Panel$1, { value: startDate, month: baseMonth, rangeEnd: endDate, hoverDate: hoverDate, onDateHover: handleDateHover, weeks: weeks, unitYear: unitYear, unitMonth: unitMonth, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick, onOperateMonth: handleOperateMonth }) }), jsx("div", { className: 'i-daterange-col', children: jsx(Panel$1, { value: startDate, month: nextMonth, rangeEnd: endDate, hoverDate: hoverDate, onDateHover: handleDateHover, weeks: weeks, unitYear: unitYear, unitMonth: unitMonth, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick, onOperateMonth: handleOperateMonth }) })] }));
+};
+
+dayjs.extend(customParseFormat);
+const DateRange = (props) => {
+    const { value, format = "YYYY-MM-DD", placeholder = "选择日期范围", className, disabledDate, onChange, clear, onClear: onClearProp, weeks, unitYear, unitMonth, renderDate, renderMonth, renderYear, ...restProps } = props;
+    const [active, setActive] = useState(false);
+    const inputValue = useMemo(() => {
+        if (value?.[0] && value?.[1]) {
+            return `${value[0]} ~ ${value[1]}`;
+        }
+        if (value?.[0]) {
+            return `${value[0]} ~ `;
+        }
+        return "";
+    }, [value]);
+    const dayJsValue = useMemo(() => {
+        const start = value?.[0] ? dayjs(value[0], format, true) : null;
+        const end = value?.[1] ? dayjs(value[1], format, true) : null;
+        if (start?.isValid() || end?.isValid()) {
+            return [start?.isValid() ? start : null, end?.isValid() ? end : null];
+        }
+        return null;
+    }, [value, format]);
+    const handleSelected = (dates) => {
+        const formatted = dates.map((d) => d.format(format));
+        onChange?.([formatted[0], formatted[1]]);
+        setActive(false);
+    };
+    const handleVisibleChange = (v) => {
+        setActive(v);
+    };
+    const handleClear = () => {
+        onChange?.([undefined, undefined]);
+        setActive(false);
+        onClearProp?.();
+    };
+    return (jsx(Popup, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', onVisibleChange: handleVisibleChange, content: jsx(DoublePanel, { value: dayJsValue, weeks: weeks, unitYear: unitYear, unitMonth: unitMonth, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onSelected: handleSelected }), children: jsx(Input, { value: inputValue, placeholder: placeholder, readOnly: true, clear: clear, onClear: handleClear, append: jsx(Icon, { icon: jsx(CalendarMonthTwotone, {}), className: 'i-datepicker-icon', size: '1em' }), className: classNames("i-datepicker-label", className), ...restProps }) }));
+};
+
 const defaultOk = {
     children: "确定",
 };
@@ -5059,7 +5339,7 @@ const defaultCancel = {
     flat: true,
 };
 const Popconfirm = (props) => {
-    const { trigger = "click", visible, icon = jsx(Icon, { icon: jsx(InfoOutlined, {}), className: "error", size: "1.2em" }), content, okButtonProps, cancelButtonProps, children, align, position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
+    const { trigger = "click", visible, icon, content, okButtonProps, cancelButtonProps, children, align, position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
     const state = useReactive({
         loading: false,
         visible,
@@ -6531,4 +6811,4 @@ const useTheme = (props) => {
     };
 };
 
-export { Affix, Badge, Button, Card, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, MemoImage as Image, Input, List$1 as List, Loading, message as Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Resizable, River, Scroll, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };
+export { Affix, Badge, Button, Card, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, DateRange, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, MemoImage as Image, Input, List$1 as List, Loading, Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Resizable, River, Scroll, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };