@sia.soul/sia-react-ui 0.1.39 → 0.1.41

package/dist/{chunk-WR7XTQRU.js → chunk-IPDCEXQO.js}

@@ -2,11 +2,10 @@ import {
   TextArea
 } from "./chunk-SMCYEPBL.js";
 import {
-  FloatingScrollbarProvider,
   Popover,
   Tooltip,
   useOverlayLifecycle
-} from "./chunk-LRGD2QDA.js";
+} from "./chunk-3Q3S6CDZ.js";
 import {
   Dropdown,
   Icon
@@ -191,6 +190,7 @@ function Tag({
 // src/components/Tabs.tsx
 import { useEffect, useId, useLayoutEffect as useLayoutEffect2, useMemo, useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { createElement } from "react";
 function Tabs({
   items,
   activeKey,
@@ -225,6 +225,42 @@ function Tabs({
   const sliding = ["capsule", "line", "underline", "tech", "tech-line"].includes(type);
   const listRef = useRef2(null);
   const indicatorRef = useRef2(null);
+  const moreRef = useRef2(null);
+  const [overflow, setOverflow] = useState3({ count: items.length, width: 0 });
+  const [moreOpen, setMoreOpen] = useState3(false);
+  const visibleCount = resolvedOrientation === "horizontal" ? overflow.count : items.length;
+  const hiddenItems = items.slice(visibleCount);
+  useLayoutEffect2(() => {
+    const list = listRef.current;
+    if (!list || resolvedOrientation !== "horizontal") return;
+    const entries = Array.from(list.children).filter((node) => node instanceof HTMLElement && node.hasAttribute("data-tab-entry"));
+    const measure = () => {
+      const css = getComputedStyle(list);
+      const gap = parseFloat(css.columnGap) || 0;
+      const padding = (parseFloat(css.paddingLeft) || 0) + (parseFloat(css.paddingRight) || 0);
+      const widths = entries.map((node) => node.getBoundingClientRect().width);
+      const total = widths.reduce((sum, width2) => sum + width2, 0) + gap * Math.max(0, widths.length - 1);
+      const available = Math.max(0, list.clientWidth - padding);
+      let count = widths.length;
+      if (total > available + 0.5) {
+        const moreWidth = moreRef.current?.getBoundingClientRect().width ?? 36;
+        let used = moreWidth;
+        count = 0;
+        for (const width2 of widths) {
+          if (used + gap + width2 > available + 0.5) break;
+          used += gap + width2;
+          count++;
+        }
+      }
+      const width = Math.ceil(total + padding + (parseFloat(css.borderLeftWidth) || 0) + (parseFloat(css.borderRightWidth) || 0));
+      setOverflow((previous) => previous.count === count && previous.width === width ? previous : { count, width });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(list);
+    entries.forEach((entry) => observer.observe(entry));
+    return () => observer.disconnect();
+  }, [items, type, size, closable, resolvedOrientation, tabBarTitle, tabBarExtraContent]);
   const [contentState, setContentState] = useState3(() => ({ key: selectedKey, visited: /* @__PURE__ */ new Set([selectedKey]) }));
   const settledKeyRef = useRef2(selectedKey);
   const afterChangeRef = useRef2(onAfterChange);
@@ -239,16 +275,12 @@ function Tabs({
     function updateIndicator() {
       if (!list || !indicator) return;
       const active = list.querySelector('[role="tab"][aria-selected="true"]');
-      if (!active) {
+      if (!active || active.closest('[data-tab-hidden="true"]')) {
         indicator.style.visibility = "hidden";
         return;
       }
       const listRect = list.getBoundingClientRect();
       const rect = active.getBoundingClientRect();
-      if (type === "tech-line" && resolvedOrientation === "horizontal") {
-        if (rect.left < listRect.left) list.scrollLeft += rect.left - listRect.left;
-        else if (rect.right > listRect.right) list.scrollLeft += rect.right - listRect.right;
-      }
       const currentRect = active.getBoundingClientRect();
       indicator.style.transform = `translate(${currentRect.left - listRect.left - list.clientLeft + list.scrollLeft}px, ${currentRect.top - listRect.top - list.clientTop + list.scrollTop}px)`;
       indicator.style.width = `${rect.width}px`;
@@ -264,7 +296,7 @@ function Tabs({
     observer.observe(list);
     list.querySelectorAll('[role="tab"]').forEach((tab) => observer.observe(tab));
     return () => observer.disconnect();
-  }, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable]);
+  }, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable, visibleCount]);
   useEffect(() => {
     let cancelled = false;
     let frame = 0;
@@ -298,7 +330,8 @@ function Tabs({
   }
   function focusAndSelect(key) {
     selectTab(key);
-    document.getElementById(`${baseId}-tab-${key}`)?.focus();
+    if (items.findIndex((item) => item.key === key) >= visibleCount) moreRef.current?.focus();
+    else document.getElementById(`${baseId}-tab-${key}`)?.focus();
   }
   function handleKeyDown(event, key) {
     const previousKey = resolvedOrientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
@@ -320,54 +353,53 @@ function Tabs({
       ...withTitleTooltip(props),
       children: [
         /* @__PURE__ */ jsxs4("div", { className: "sia-tabs__header", children: [
-          /* @__PURE__ */ jsx4(FloatingScrollbarProvider, { targetRef: listRef, disabled: type !== "tech-line" || resolvedOrientation !== "horizontal" }),
           tabBarTitle ? /* @__PURE__ */ jsxs4("div", { className: "sia-tabs__title", children: [
             tabBarTitle,
             type === "tech-line" ? /* @__PURE__ */ jsx4("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M0 39.25 H5 Q8 39.25 10 35.25 L28 3.75 Q29 1.75 32 1.75", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }) : null
           ] }) : null,
-          /* @__PURE__ */ jsxs4("div", { ref: listRef, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
+          /* @__PURE__ */ jsxs4("div", { ref: listRef, style: resolvedOrientation === "horizontal" && overflow.width ? { width: overflow.width } : void 0, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
             sliding ? /* @__PURE__ */ jsx4("span", { ref: indicatorRef, className: `sia-tabs__indicator${type === "capsule" ? " sia-tabs__capsule-indicator" : ""}`, "aria-hidden": "true", children: type === "tech-line" ? /* @__PURE__ */ jsx4("span", { className: "sia-tabs__indicator-shape", "aria-hidden": "true" }) : null }, type) : null,
-            items.map((item) => {
+            items.map((item, index) => {
               const selected = item.key === selectedKey;
               const canClose = item.closable ?? closable;
-              const tabNode = /* @__PURE__ */ jsxs4("span", { className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, children: [
-                /* @__PURE__ */ jsxs4(
-                  "button",
-                  {
-                    id: `${baseId}-tab-${item.key}`,
-                    type: "button",
-                    className: "sia-tabs__tab",
-                    role: "tab",
-                    "aria-selected": selected,
-                    "aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
-                    tabIndex: selected ? 0 : -1,
-                    disabled: item.disabled,
-                    onClick: () => selectTab(item.key),
-                    onKeyDown: (event) => handleKeyDown(event, item.key),
-                    children: [
-                      type === "tech-line" ? /* @__PURE__ */ jsx4("span", { className: "sia-tabs__tab-shape", "aria-hidden": "true" }) : null,
-                      item.icon ? /* @__PURE__ */ jsx4("span", { className: "sia-tabs__icon", children: item.icon }) : null,
-                      /* @__PURE__ */ jsx4("span", { children: item.label })
-                    ]
-                  }
-                ),
-                canClose ? /* @__PURE__ */ jsx4(
-                  "button",
-                  {
-                    type: "button",
-                    className: "sia-tabs__close",
-                    "aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
-                    disabled: item.disabled,
-                    onClick: () => onEdit?.(item.key, "remove"),
-                    children: /* @__PURE__ */ jsx4(Icon, { name: "close", size: 12 })
-                  }
-                ) : null
-              ] }, item.key);
               const contextMenuItems = typeof tabContextMenu === "function" ? tabContextMenu(item) : tabContextMenu;
+              const entryProps = { "data-tab-entry": "", "data-tab-hidden": index >= visibleCount, "aria-hidden": index >= visibleCount || void 0 };
+              const tabNode = /* @__PURE__ */ createElement("span", { ...!contextMenuItems?.length ? entryProps : {}, className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, key: item.key }, /* @__PURE__ */ jsxs4(
+                "button",
+                {
+                  id: `${baseId}-tab-${item.key}`,
+                  type: "button",
+                  className: "sia-tabs__tab",
+                  role: "tab",
+                  "aria-selected": selected,
+                  "aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
+                  tabIndex: selected ? 0 : -1,
+                  disabled: item.disabled,
+                  onClick: () => selectTab(item.key),
+                  onKeyDown: (event) => handleKeyDown(event, item.key),
+                  children: [
+                    type === "tech-line" ? /* @__PURE__ */ jsx4("span", { className: "sia-tabs__tab-shape", "aria-hidden": "true" }) : null,
+                    item.icon ? /* @__PURE__ */ jsx4("span", { className: "sia-tabs__icon", children: item.icon }) : null,
+                    /* @__PURE__ */ jsx4("span", { children: item.label })
+                  ]
+                }
+              ), canClose ? /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: "sia-tabs__close",
+                  "aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
+                  disabled: item.disabled,
+                  onClick: () => onEdit?.(item.key, "remove"),
+                  children: /* @__PURE__ */ jsx4(Icon, { name: "close", size: 12 })
+                }
+              ) : null);
               if (!contextMenuItems?.length) return tabNode;
-              return /* @__PURE__ */ jsx4(
+              return /* @__PURE__ */ createElement(
                 Dropdown,
                 {
+                  ...entryProps,
+                  key: item.key,
                   className: "sia-tabs__tab-context-trigger",
                   popupClassName: "sia-tabs__tab-context-menu",
                   trigger: ["contextMenu"],
@@ -376,12 +408,26 @@ function Tabs({
                     items: contextMenuItems,
                     selectable: false,
                     onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
-                  },
-                  children: tabNode
+                  }
                 },
-                item.key
+                tabNode
               );
-            })
+            }),
+            resolvedOrientation === "horizontal" ? /* @__PURE__ */ jsx4(
+              Dropdown,
+              {
+                className: "sia-tabs__more",
+                "data-tab-hidden": !hiddenItems.length,
+                trigger: ["hover", "click"],
+                placement: "bottomRight",
+                showTriggerIcon: false,
+                autoFocus: true,
+                open: moreOpen && hiddenItems.length > 0,
+                onOpenChange: setMoreOpen,
+                menu: { items: hiddenItems.map((item) => ({ key: item.key, label: item.label, icon: item.icon, disabled: item.disabled })), selectedKeys: [selectedKey], onClick: (info) => selectTab(info.key) },
+                children: /* @__PURE__ */ jsx4(Button, { ref: moreRef, variant: "text", icon: /* @__PURE__ */ jsx4(Icon, { name: "more-horizontal" }), "aria-label": "\u66F4\u591A\u9009\u9879\u5361", onKeyDown: (event) => handleKeyDown(event, selectedKey), className: hiddenItems.some((item) => item.key === selectedKey) ? "is-active" : void 0 })
+              }
+            ) : null
           ] }),
           tabBarExtraContent ? /* @__PURE__ */ jsx4("div", { className: "sia-tabs__extra", children: tabBarExtraContent }) : null
         ] }),
@@ -412,7 +458,7 @@ function Tabs({
 }
 
 // src/components/Feedback.tsx
-import { useEffect as useEffect2, useMemo as useMemo2, useState as useState4 } from "react";
+import { cloneElement, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -432,11 +478,53 @@ function Popconfirm({
   showCancel = true,
   icon = /* @__PURE__ */ jsx5(Icon, { name: "question", variant: "filled" }),
   onConfirm,
+  onConfirmError,
   onCancel,
-  onOpenChange
+  onOpenChange,
+  arrow = true,
+  autoAdjustOverflow = true,
+  skipConfirm = false
 }) {
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
   const [loading, setLoading] = useState4(false);
+  const pendingRef = useRef3(false);
+  const requestRef = useRef3(0);
+  function changeVisible(next) {
+    if (!next) {
+      requestRef.current++;
+      pendingRef.current = false;
+      setLoading(false);
+    }
+    setVisible(next);
+  }
+  useEffect2(() => {
+    if (!visible) {
+      requestRef.current++;
+      pendingRef.current = false;
+      setLoading(false);
+    }
+    return () => {
+      requestRef.current++;
+    };
+  }, [visible]);
+  async function confirm(event) {
+    if (disabled || pendingRef.current || okButtonProps?.loading || okButtonProps?.disabled) return;
+    pendingRef.current = true;
+    const request = ++requestRef.current;
+    try {
+      const result = onConfirm?.(event);
+      if (result && typeof result === "object" && typeof result.then === "function") setLoading(true);
+      const resolved = await result;
+      if (request === requestRef.current && resolved !== false && visible) changeVisible(false);
+    } catch (error) {
+      if (request === requestRef.current) onConfirmError?.(error);
+    } finally {
+      if (request === requestRef.current) {
+        pendingRef.current = false;
+        setLoading(false);
+      }
+    }
+  }
   const content = /* @__PURE__ */ jsxs5("div", { className: "sia-popconfirm", children: [
     /* @__PURE__ */ jsxs5("div", { className: "sia-popconfirm__message", children: [
       /* @__PURE__ */ jsx5("span", { children: icon }),
@@ -448,24 +536,21 @@ function Popconfirm({
     /* @__PURE__ */ jsxs5("div", { className: "sia-popconfirm__actions", children: [
       showCancel ? /* @__PURE__ */ jsx5(Button, { size: "small", ...cancelButtonProps, onClick: (event) => {
         cancelButtonProps?.onClick?.(event);
+        if (event.defaultPrevented) return;
         onCancel?.(event);
-        setVisible(false);
+        changeVisible(false);
       }, children: cancelText }) : null,
-      /* @__PURE__ */ jsx5(Button, { size: "small", variant: "primary", ...okButtonProps, loading: loading || okButtonProps?.loading, onClick: async (event) => {
+      /* @__PURE__ */ jsx5(Button, { size: "small", variant: "primary", ...okButtonProps, loading: loading || okButtonProps?.loading, onClick: (event) => {
         okButtonProps?.onClick?.(event);
-        const result = onConfirm?.(event);
-        if (result instanceof Promise) {
-          setLoading(true);
-          try {
-            if (await result !== false) setVisible(false);
-          } finally {
-            setLoading(false);
-          }
-        } else if (result !== false) setVisible(false);
+        if (!event.defaultPrevented) void confirm(event);
       }, children: okText })
     ] })
   ] });
-  return /* @__PURE__ */ jsx5(Popover, { content, placement, trigger: disabled ? [] : trigger, open: visible, onOpenChange: setVisible, children });
+  const target = skipConfirm ? cloneElement(children, { onClick: (event) => {
+    children.props.onClick?.(event);
+    if (!event.defaultPrevented) void confirm(event);
+  } }) : children;
+  return /* @__PURE__ */ jsx5(Popover, { content, placement, arrow, autoAdjustOverflow, trigger: disabled || skipConfirm ? [] : trigger, open: visible && !skipConfirm && !disabled, onOpenChange: changeVisible, children: target });
 }
 function Progress({
   percent = 0,

package/dist/{chunk-GLS4WVIZ.js → chunk-LWVZEUGJ.js}

@@ -1,7 +1,7 @@
 import {
   FloatingScrollbarProvider,
   Select
-} from "./chunk-LRGD2QDA.js";
+} from "./chunk-3Q3S6CDZ.js";
 import {
   Icon
 } from "./chunk-XCVAVCIO.js";
@@ -495,11 +495,12 @@ function DateRangePicker({
   const [currentValue, setCurrentValue] = useControllableState({ value: value === void 0 ? void 0 : Array.isArray(value) ? value : ["", ""], defaultValue, onChange });
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
   const [draftValue, setDraftValue] = useState(currentValue);
-  const [activeIndex, setActiveIndex] = useState(currentValue[0] && !currentValue[1] ? 1 : 0);
+  const [activeIndex, setActiveIndex] = useState(endpointDisabled[0] || currentValue[0] && !currentValue[1] ? 1 : 0);
+  const [confirmedIndex, setConfirmedIndex] = useState(null);
+  const [presetSelected, setPresetSelected] = useState(false);
   const [hoverDate, setHoverDate] = useState("");
   const [viewMonth, setViewMonth] = useState(() => startOfMonth(parseDate(dayFromValue(currentValue[0] || currentValue[1])) ?? /* @__PURE__ */ new Date()));
   const [endViewMonth, setEndViewMonth] = useState(() => startOfMonth(parseDate(dayFromValue(currentValue[1])) ?? addMonths(parseDate(dayFromValue(currentValue[0])) ?? /* @__PURE__ */ new Date(), 1)));
-  const [compactDateTime, setCompactDateTime] = useState(false);
   const showSecond = showSecondFrom(showTime);
   const defaultTime = defaultTimeFrom(showTime);
   const defaultEndTime = defaultTimeFrom(showTime, 1);
@@ -510,51 +511,46 @@ function DateRangePicker({
   const resolvedNeedConfirm = needConfirm ?? Boolean(showTime);
   const rangeDates = [dayFromValue(draftValue[0]), dayFromValue(draftValue[1])];
   const invalidDateTimeRange = Boolean(showTime && draftValue[0] && draftValue[1] && draftValue[0] > draftValue[1]);
-  useEffect(() => {
-    if (!showTime || typeof document === "undefined") {
-      setCompactDateTime(false);
-      return void 0;
-    }
-    const updateLayout = () => {
-      const pairedPanelWidth = 2 * (280 + (showSecond ? 144 : 96) + 1) + 3;
-      setCompactDateTime(document.documentElement.clientWidth < pairedPanelWidth + 16);
-    };
-    updateLayout();
-    window.addEventListener("resize", updateLayout);
-    return () => window.removeEventListener("resize", updateLayout);
-  }, [showSecond, showTime]);
   useEffect(() => {
     if (!visible) return void 0;
     const close = (event) => {
       const target = event.target;
-      if (!rootRef.current?.contains(target) && !popupRef.current?.contains(target)) setVisible(false);
+      if (!rootRef.current?.contains(target) && !popupRef.current?.contains(target)) dismissPanel();
     };
     document.addEventListener("pointerdown", close);
     return () => document.removeEventListener("pointerdown", close);
-  }, [setVisible, visible]);
-  function changeOpen(next) {
-    if (next) {
+  });
+  function dismissPanel() {
+    setVisible(false);
+  }
+  function changeOpen(next, endpoint) {
+    if (next && !visible) {
+      setConfirmedIndex(null);
+      setPresetSelected(false);
       setDraftValue(currentValue);
       setTimes([timePart(currentValue[0], defaultTime), timePart(currentValue[1], defaultEndTime)]);
-      setActiveIndex(endpointDisabled[0] ? 1 : endpointDisabled[1] ? 0 : currentValue[0] && !currentValue[1] ? 1 : 0);
+      setActiveIndex(endpointDisabled[0] ? 1 : endpointDisabled[1] ? 0 : endpoint ?? (currentValue[0] && !currentValue[1] ? 1 : 0));
       const nextStartMonth = startOfMonth(parseDate(dayFromValue(currentValue[0] || currentValue[1])) ?? /* @__PURE__ */ new Date());
       setViewMonth(nextStartMonth);
       setEndViewMonth(startOfMonth(parseDate(dayFromValue(currentValue[1])) ?? addMonths(nextStartMonth, 1)));
     }
+    if (next && endpoint !== void 0 && !endpointDisabled[endpoint]) setActiveIndex(endpoint);
     setVisible(next);
   }
-  function isDisabled(day, index = activeIndex, pairedDateTime = false) {
+  function isDisabled(day, index = activeIndex, dateTimeStep = false) {
     if (endpointDisabled[index]) return true;
     const minimum = minDate ?? props.min;
     const maximum = maxDate ?? props.max;
     if (minimum && day < String(minimum).slice(0, 10)) return true;
     if (maximum && day > String(maximum).slice(0, 10)) return true;
     const from = index === 1 ? rangeDates[0] : void 0;
-    if (pairedDateTime) {
-      const otherEndpoint = index === 0 ? rangeDates[1] : rangeDates[0];
-      if (index === 0 && otherEndpoint && day > otherEndpoint) return true;
-      if (index === 1 && otherEndpoint && day < otherEndpoint) return true;
-      if (otherEndpoint && maxRangeDays && Math.abs(daysBetween(otherEndpoint, day)) >= maxRangeDays) return true;
+    if (dateTimeStep) {
+      const otherIndex2 = index === 0 ? 1 : 0;
+      const otherEndpoint = rangeDates[otherIndex2];
+      if (otherEndpoint && (endpointDisabled[otherIndex2] || confirmedIndex === otherIndex2)) {
+        if (index === 0 && day > otherEndpoint || index === 1 && day < otherEndpoint) return true;
+        if (maxRangeDays && Math.abs(daysBetween(otherEndpoint, day)) >= maxRangeDays) return true;
+      }
     } else if (from && maxRangeDays && Math.abs(daysBetween(from, day)) >= maxRangeDays) return true;
     return disabledDate?.(day, { from, type: "date" }) ?? false;
   }
@@ -562,8 +558,12 @@ function DateRangePicker({
     return showTime ? withTime(day, times[index], showSecond) : day;
   }
   function updateDraft(next) {
+    setPresetSelected(false);
     setDraftValue(next);
     onCalendarChange?.(next);
+    if (!showTime && isValidRange(next) && (next[0] !== currentValue[0] || next[1] !== currentValue[1])) {
+      setCurrentValue(next);
+    }
   }
   function selectDate(day) {
     if (isDisabled(day)) return;
@@ -573,7 +573,6 @@ function DateRangePicker({
       next[index] = buildRangeValue(day, index);
       updateDraft(next);
       if (!resolvedNeedConfirm && isValidRange(next)) {
-        setCurrentValue(next);
         changeOpen(false);
       }
       return;
@@ -591,7 +590,6 @@ function DateRangePicker({
     setActiveIndex(0);
     setHoverDate("");
     if (!resolvedNeedConfirm) {
-      setCurrentValue(ordered);
       changeOpen(false);
     }
   }
@@ -601,16 +599,7 @@ function DateRangePicker({
     nextValue[index] = buildRangeValue(day, index);
     updateDraft(nextValue);
     setHoverDate("");
-    if (!resolvedNeedConfirm && compactDateTime && index === 0) {
-      setActiveIndex(1);
-      setEndViewMonth(startOfMonth(parseDate(day) ?? /* @__PURE__ */ new Date()));
-      return;
-    }
     setActiveIndex(index);
-    if (!resolvedNeedConfirm && nextValue[0] && nextValue[1] && nextValue[0] <= nextValue[1]) {
-      setCurrentValue(nextValue);
-      changeOpen(false);
-    }
   }
   function changeTime(index, nextTime) {
     if (endpointDisabled[index]) return;
@@ -646,11 +635,16 @@ function DateRangePicker({
     }
     return true;
   }
+  const otherIndex = activeIndex === 0 ? 1 : 0;
+  const needsOtherConfirmation = Boolean(showTime && !presetSelected && !endpointDisabled[otherIndex] && confirmedIndex !== otherIndex);
   function confirm() {
-    if (compactDateTime && showTime && activeIndex === 0) {
-      if (!draftValue[0]) return;
-      setActiveIndex(1);
-      setEndViewMonth(startOfMonth(parseDate(dayFromValue(draftValue[1] || draftValue[0])) ?? /* @__PURE__ */ new Date()));
+    if (needsOtherConfirmation) {
+      if (!draftValue[activeIndex] && !allowEmpty[activeIndex]) return;
+      setConfirmedIndex(activeIndex);
+      setActiveIndex(otherIndex);
+      const month = startOfMonth(parseDate(dayFromValue(draftValue[activeIndex])) ?? /* @__PURE__ */ new Date());
+      if (otherIndex === 0) setViewMonth(month);
+      else setEndViewMonth(month);
       setHoverDate("");
       return;
     }
@@ -666,12 +660,13 @@ function DateRangePicker({
     ];
     if (!isValidRange(next)) return;
     updateDraft(next);
+    setConfirmedIndex(null);
+    setPresetSelected(true);
     setTimes([timePart(next[0], defaultTime), timePart(next[1], defaultEndTime)]);
     const nextStartMonth = startOfMonth(parseDate(dayFromValue(next[0] || next[1])) ?? /* @__PURE__ */ new Date());
     setViewMonth(nextStartMonth);
     setEndViewMonth(startOfMonth(parseDate(dayFromValue(next[1])) ?? addMonths(nextStartMonth, 1)));
-    if (!resolvedNeedConfirm) {
-      setCurrentValue(next);
+    if (!showTime && !resolvedNeedConfirm) {
       changeOpen(false);
     }
   }
@@ -721,6 +716,7 @@ function DateRangePicker({
               value: times[index],
               showSecond,
               ariaLabel: `${endpointLabel}\u65F6\u95F4`,
+              disabledTime: endpointDisabled[index] ? () => true : void 0,
               onChange: (nextTime) => changeTime(index, nextTime)
             }
           )
@@ -729,8 +725,9 @@ function DateRangePicker({
       endpointLabel
     );
   }
-  const startFloating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder[0], filled: Boolean(currentValue[0]), active: visible });
-  const endFloating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder[1], filled: Boolean(currentValue[1]), active: visible });
+  const displayValue = visible && allowEmpty.some(Boolean) ? draftValue : currentValue;
+  const startFloating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder[0], filled: Boolean(displayValue[0]), active: visible });
+  const endFloating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder[1], filled: Boolean(displayValue[1]), active: visible });
   return /* @__PURE__ */ jsxs2("span", { ref: rootRef, className: `sia-picker sia-picker-range-control sia-picker--${size} sia-picker--${status}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
     /* @__PURE__ */ jsxs2(
       "button",
@@ -746,66 +743,68 @@ function DateRangePicker({
         "aria-describedby": props["aria-describedby"],
         "aria-errormessage": props["aria-errormessage"],
         disabled,
-        onClick: () => changeOpen(!visible),
+        onClick: (event) => {
+          const field = event.target.closest("[data-range-endpoint]");
+          const endpoint = field?.dataset.rangeEndpoint;
+          if (showTime && (endpoint === "0" || endpoint === "1")) {
+            const index = Number(endpoint);
+            if (!endpointDisabled[index]) changeOpen(true, index);
+          } else if (visible) dismissPanel();
+          else changeOpen(true);
+        },
         children: [
-          /* @__PURE__ */ jsxs2("span", { className: `sia-picker-range-control__field${startFloating.className}`, children: [
-            /* @__PURE__ */ jsx2("span", { className: `sia-picker-range-control__value${currentValue[0] ? "" : " is-placeholder"}`, children: currentValue[0] ? formatValue(currentValue[0]) : placeholder[0] }),
+          /* @__PURE__ */ jsxs2("span", { "data-range-endpoint": "0", className: `sia-picker-range-control__field${startFloating.className}${visible && activeIndex === 0 ? " is-active" : ""}`, children: [
+            /* @__PURE__ */ jsx2("span", { className: `sia-picker-range-control__value${displayValue[0] ? "" : " is-placeholder"}`, children: displayValue[0] ? formatValue(displayValue[0]) : placeholder[0] }),
             startFloating.label
           ] }),
           /* @__PURE__ */ jsx2("span", { className: "sia-picker-range-control__separator", children: separator }),
-          /* @__PURE__ */ jsxs2("span", { className: `sia-picker-range-control__field${endFloating.className}`, children: [
-            /* @__PURE__ */ jsx2("span", { className: `sia-picker-range-control__value${currentValue[1] ? "" : " is-placeholder"}`, children: currentValue[1] ? formatValue(currentValue[1]) : placeholder[1] }),
+          /* @__PURE__ */ jsxs2("span", { "data-range-endpoint": "1", className: `sia-picker-range-control__field${endFloating.className}${visible && activeIndex === 1 ? " is-active" : ""}`, children: [
+            /* @__PURE__ */ jsx2("span", { className: `sia-picker-range-control__value${displayValue[1] ? "" : " is-placeholder"}`, children: displayValue[1] ? formatValue(displayValue[1]) : placeholder[1] }),
             endFloating.label
           ] }),
           /* @__PURE__ */ jsx2("span", { className: "sia-picker__icon", "aria-hidden": "true", children: suffixIcon ?? /* @__PURE__ */ jsx2(Icon, { name: "calendar", size: 16 }) })
         ]
       }
     ),
-    allowClear && (currentValue[0] || currentValue[1]) && !disabled ? /* @__PURE__ */ jsx2("button", { type: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65E5\u671F\u8303\u56F4", onClick: clearValue, children: /* @__PURE__ */ jsx2(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
-    /* @__PURE__ */ jsxs2(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: visible, className: `sia-date-panel sia-date-panel--range${showTime ? ` sia-date-panel--with-time sia-date-panel--range-time-${compactDateTime ? "compact" : "paired"}` : ""}${presets?.length ? " sia-date-panel--with-presets" : ""}`, role: "dialog", "aria-label": "\u65E5\u671F\u8303\u56F4\u9009\u62E9\u9762\u677F", children: [
-      /* @__PURE__ */ jsx2("div", { className: "sia-date-panel__body", children: showTime ? /* @__PURE__ */ jsx2("div", { className: "sia-date-panel__range-date-time", children: compactDateTime ? renderDateTimeGroup(activeIndex) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-        renderDateTimeGroup(0),
-        renderDateTimeGroup(1)
-      ] }) }) : /* @__PURE__ */ jsxs2("div", { className: "sia-date-panel__range-calendars", children: [
-        /* @__PURE__ */ jsxs2("section", { className: "sia-date-panel__calendar", children: [
-          /* @__PURE__ */ jsx2(
-            CalendarHeader,
-            {
-              month: viewMonth,
-              range: true,
-              onPreviousYear: () => setViewMonth(addMonths(viewMonth, -12)),
-              onPreviousMonth: () => setViewMonth(addMonths(viewMonth, -1))
-            }
-          ),
-          /* @__PURE__ */ jsx2(CalendarMonth, { month: viewMonth, range: rangeDates, previewEnd: activeIndex === 1 ? hoverDate : "", disabledDate: isDisabled, onSelect: selectDate, onHover: activeIndex === 1 ? setHoverDate : void 0 })
-        ] }),
-        /* @__PURE__ */ jsxs2("section", { className: "sia-date-panel__calendar", children: [
-          /* @__PURE__ */ jsx2(
-            CalendarHeader,
-            {
-              month: addMonths(viewMonth, 1),
-              range: true,
-              onNextMonth: () => setViewMonth(addMonths(viewMonth, 1)),
-              onNextYear: () => setViewMonth(addMonths(viewMonth, 12))
-            }
-          ),
-          /* @__PURE__ */ jsx2(CalendarMonth, { month: addMonths(viewMonth, 1), range: rangeDates, previewEnd: activeIndex === 1 ? hoverDate : "", disabledDate: isDisabled, onSelect: selectDate, onHover: activeIndex === 1 ? setHoverDate : void 0 })
+    allowClear && (displayValue[0] || displayValue[1]) && !disabled ? /* @__PURE__ */ jsx2("button", { type: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65E5\u671F\u8303\u56F4", onClick: clearValue, children: /* @__PURE__ */ jsx2(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
+    /* @__PURE__ */ jsxs2(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: visible, className: `sia-date-panel sia-date-panel--range${showTime ? " sia-date-panel--with-time sia-date-panel--range-time-compact" : ""}${presets?.length ? " sia-date-panel--with-presets" : ""}`, role: "dialog", "aria-label": "\u65E5\u671F\u8303\u56F4\u9009\u62E9\u9762\u677F", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "sia-date-panel__body", children: [
+        presets?.length ? /* @__PURE__ */ jsx2("aside", { className: "sia-date-panel__presets", "aria-label": "\u5FEB\u6377\u65E5\u671F\u8303\u56F4", children: presets.map((preset, index) => /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => applyPreset(preset), children: preset.label }, index)) }) : null,
+        showTime ? /* @__PURE__ */ jsx2("div", { className: "sia-date-panel__range-date-time", children: renderDateTimeGroup(activeIndex) }) : /* @__PURE__ */ jsxs2("div", { className: "sia-date-panel__range-calendars", children: [
+          /* @__PURE__ */ jsxs2("section", { className: "sia-date-panel__calendar", children: [
+            /* @__PURE__ */ jsx2(
+              CalendarHeader,
+              {
+                month: viewMonth,
+                range: true,
+                onPreviousYear: () => setViewMonth(addMonths(viewMonth, -12)),
+                onPreviousMonth: () => setViewMonth(addMonths(viewMonth, -1))
+              }
+            ),
+            /* @__PURE__ */ jsx2(CalendarMonth, { month: viewMonth, range: rangeDates, previewEnd: activeIndex === 1 ? hoverDate : "", disabledDate: isDisabled, onSelect: selectDate, onHover: activeIndex === 1 ? setHoverDate : void 0 })
+          ] }),
+          /* @__PURE__ */ jsxs2("section", { className: "sia-date-panel__calendar", children: [
+            /* @__PURE__ */ jsx2(
+              CalendarHeader,
+              {
+                month: addMonths(viewMonth, 1),
+                range: true,
+                onNextMonth: () => setViewMonth(addMonths(viewMonth, 1)),
+                onNextYear: () => setViewMonth(addMonths(viewMonth, 12))
+              }
+            ),
+            /* @__PURE__ */ jsx2(CalendarMonth, { month: addMonths(viewMonth, 1), range: rangeDates, previewEnd: activeIndex === 1 ? hoverDate : "", disabledDate: isDisabled, onSelect: selectDate, onHover: activeIndex === 1 ? setHoverDate : void 0 })
+          ] })
         ] })
-      ] }) }),
+      ] }),
       /* @__PURE__ */ jsx2(
         DatePanelFooter,
         {
           showToday: showToday && !presets?.length,
-          needConfirm: resolvedNeedConfirm || allowEmpty.some(Boolean),
-          disabledConfirm: compactDateTime && showTime && activeIndex === 0 ? !draftValue[0] : !isValidRange(draftValue),
-          confirmText: compactDateTime && showTime && activeIndex === 0 ? "\u4E0B\u4E00\u6B65" : "\u786E\u5B9A",
+          needConfirm: Boolean(showTime) || resolvedNeedConfirm || allowEmpty.some(Boolean),
+          disabledConfirm: needsOtherConfirmation ? !draftValue[activeIndex] && !allowEmpty[activeIndex] : !isValidRange(draftValue),
           extra: /* @__PURE__ */ jsxs2(Fragment, { children: [
             renderExtraFooter?.(),
-            presets?.map((preset, index) => /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => applyPreset(preset), children: preset.label }, index)),
-            compactDateTime && showTime && activeIndex === 1 ? /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => {
-              setActiveIndex(0);
-              setViewMonth(startOfMonth(parseDate(dayFromValue(draftValue[0])) ?? /* @__PURE__ */ new Date()));
-            }, children: "\u4E0A\u4E00\u6B65" }) : null,
             invalidDateTimeRange ? /* @__PURE__ */ jsx2("small", { className: "sia-date-panel__range-error", children: "\u7ED3\u675F\u65F6\u95F4\u4E0D\u80FD\u65E9\u4E8E\u5F00\u59CB\u65F6\u95F4" }) : maxRangeDays ? /* @__PURE__ */ jsxs2("small", { children: [
               "\u6700\u591A\u9009\u62E9 ",
               maxRangeDays,