@ioca/react 1.5.17 → 1.5.18

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';
@@ -4317,11 +4317,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 +4334,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 +4357,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 +4379,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 +4431,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,16 +4532,26 @@ 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;
@@ -4772,7 +4819,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 +4843,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 +4871,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 +4908,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 +4977,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 +5093,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 +5117,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 +5212,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 +6684,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 };

package/lib/types/components/input/type.d.ts

@@ -8,6 +8,7 @@ interface IInput extends BaseInput, Omit<InputHTMLAttributes<HTMLInputElement>,
     prepend?: ReactNode;
     append?: ReactNode;
     hideVisible?: boolean;
+    clear?: boolean;
     onClear?: () => void;
 }
 interface ITextarea extends Omit<BaseInput, "ref">, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> {

package/lib/types/components/message/index.d.ts

@@ -1,5 +1,7 @@
-import message from './message.js';
+import message, { MessageContainer } from './message.js';
 
+declare const Message: typeof message & {
+    Container: typeof MessageContainer;
+};
 
-
-export { message as default };
+export { MessageContainer, Message as default };

package/lib/types/components/message/message.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { IMessage } from './type.js';
+import { IMessageConfig, IMessage, IMessageContainerProps } from './type.js';
 
-declare function message(config: IMessage | ReactNode): {
+declare function message(config: IMessageConfig | ReactNode): {
     instance: IMessage;
     close: any;
 };
@@ -22,7 +22,8 @@ declare namespace message {
         instance: IMessage;
         close: any;
     };
-    var one: (config: IMessage) => void;
+    var one: (config: IMessageConfig) => void;
 }
+declare function MessageContainer({ align, fromBottom, unshift, gap, offset, duration, }: IMessageContainerProps): any;
 
-export { message as default };
+export { MessageContainer, message as default };

package/lib/types/components/message/type.d.ts

@@ -1,21 +1,34 @@
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 
-interface IMessage {
-    id?: string;
+/** User-facing callable config for message() */
+interface IMessageConfig {
     content?: ReactNode;
-    active?: boolean;
     duration?: number;
-    gap?: number;
-    offset?: string;
-    max?: number;
-    align?: "center" | "left" | "right";
+    style?: CSSProperties;
+    className?: string;
     unshift?: boolean;
     closable?: boolean;
-    timer?: ReturnType<typeof setTimeout>;
-    className?: string;
-    close?: () => void;
     onShow?: () => void;
     onHide?: () => void;
 }
+/** Internal runtime message (extends user config with system fields) */
+interface IMessage extends IMessageConfig {
+    id: string;
+    active: boolean;
+    align?: string;
+    timer?: ReturnType<typeof setTimeout>;
+    close?: () => void;
+}
+/** Props for <Message.Container /> */
+interface IMessageContainerProps {
+    align?: "center" | "left" | "right";
+    fromBottom?: boolean;
+    unshift?: boolean;
+    gap?: number;
+    offset?: string;
+    duration?: number;
+    className?: string;
+    style?: CSSProperties;
+}
 
-export type { IMessage };
+export type { IMessage, IMessageConfig, IMessageContainerProps };

package/lib/types/components/picker/daterange/daterange.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IDateRange } from '../type.js';
+
+declare const DateRange: (props: IDateRange) => react_jsx_runtime.JSX.Element;
+
+export { DateRange as default };

package/lib/types/components/picker/daterange/index.d.ts

@@ -0,0 +1,5 @@
+import DateRange from './daterange.js';
+
+
+
+export { DateRange, DateRange as default };

package/lib/types/components/picker/type.d.ts

@@ -1,6 +1,6 @@
 import { ColorPickerProps } from '@rc-component/color-picker';
+import { ReactNode, CSSProperties } from 'react';
 import { Dayjs } from 'dayjs';
-import { ReactNode } from 'react';
 import { BaseInput } from '../../type/index.js';
 import { IInput } from '../input/type.js';
 import { IPopup } from '../popup/type.js';
@@ -20,6 +20,15 @@ interface IBaseDates {
     onDateClick?: (date: Dayjs) => void;
     disabledDate?: (date: Dayjs) => boolean;
 }
+interface IDateRange extends Omit<IBaseDates, "value" | "onDateClick"> {
+    value?: [string | undefined, string | undefined];
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+    clear?: boolean;
+    onChange?: (value: [string | undefined, string | undefined]) => void;
+    onClear?: () => void;
+}
 interface ITimePicker extends BaseInput, IInput {
     value?: any;
     format?: string;
@@ -43,4 +52,4 @@ interface IColorPicker extends Omit<ColorPickerProps, "value" | "onChange"> {
     onChange?: (value: any) => void;
 }
 
-export type { IBaseDates, IColorPicker, IDatePicker, ITimePicker };
+export type { IBaseDates, IColorPicker, IDatePicker, IDateRange, ITimePicker };

package/lib/types/index.d.ts

@@ -16,11 +16,12 @@ export { default as Image } from './components/image/image.js';
 export { default as Input } from './components/input/input.js';
 export { default as List } from './components/list/list.js';
 export { default as Loading } from './components/loading/loading.js';
-export { default as Message } from './components/message/message.js';
+export { default as Message } from './components/message/index.js';
 export { default as Modal } from './components/modal/modal.js';
 export { default as Pagination } from './components/pagination/pagination.js';
 export { default as ColorPicker } from './components/picker/colors/index.js';
 export { default as TimePicker } from './components/picker/time/index.js';
+export { default as DateRange } from './components/picker/daterange/daterange.js';
 export { default as DatePicker } from './components/picker/dates/index.js';
 export { default as Popconfirm } from './components/popconfirm/popconfirm.js';
 export { default as Popup } from './components/popup/popup.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ioca/react",
-    "version": "1.5.17",
+    "version": "1.5.18",
     "type": "module",
     "scripts": {
         "dev": "vite",