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

package/dist/select-date-range.cjs

@@ -1991,11 +1991,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] = (0, import_react7.useState)(currentValue);
-  const [activeIndex, setActiveIndex] = (0, import_react7.useState)(currentValue[0] && !currentValue[1] ? 1 : 0);
+  const [activeIndex, setActiveIndex] = (0, import_react7.useState)(endpointDisabled[0] || currentValue[0] && !currentValue[1] ? 1 : 0);
+  const [confirmedIndex, setConfirmedIndex] = (0, import_react7.useState)(null);
+  const [presetSelected, setPresetSelected] = (0, import_react7.useState)(false);
   const [hoverDate, setHoverDate] = (0, import_react7.useState)("");
   const [viewMonth, setViewMonth] = (0, import_react7.useState)(() => startOfMonth(parseDate(dayFromValue(currentValue[0] || currentValue[1])) ?? /* @__PURE__ */ new Date()));
   const [endViewMonth, setEndViewMonth] = (0, import_react7.useState)(() => startOfMonth(parseDate(dayFromValue(currentValue[1])) ?? addMonths(parseDate(dayFromValue(currentValue[0])) ?? /* @__PURE__ */ new Date(), 1)));
-  const [compactDateTime, setCompactDateTime] = (0, import_react7.useState)(false);
   const showSecond = showSecondFrom(showTime);
   const defaultTime = defaultTimeFrom(showTime);
   const defaultEndTime = defaultTimeFrom(showTime, 1);
@@ -2006,51 +2007,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]);
-  (0, import_react7.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]);
   (0, import_react7.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;
   }
@@ -2058,8 +2054,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;
@@ -2069,7 +2069,6 @@ function DateRangePicker({
       next[index] = buildRangeValue(day, index);
       updateDraft(next);
       if (!resolvedNeedConfirm && isValidRange(next)) {
-        setCurrentValue(next);
         changeOpen(false);
       }
       return;
@@ -2087,7 +2086,6 @@ function DateRangePicker({
     setActiveIndex(0);
     setHoverDate("");
     if (!resolvedNeedConfirm) {
-      setCurrentValue(ordered);
       changeOpen(false);
     }
   }
@@ -2097,16 +2095,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;
@@ -2142,11 +2131,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;
     }
@@ -2162,12 +2156,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);
     }
   }
@@ -2217,6 +2212,7 @@ function DateRangePicker({
               value: times[index],
               showSecond,
               ariaLabel: `${endpointLabel}\u65F6\u95F4`,
+              disabledTime: endpointDisabled[index] ? () => true : void 0,
               onChange: (nextTime) => changeTime(index, nextTime)
             }
           )
@@ -2225,8 +2221,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__ */ (0, import_jsx_runtime7.jsxs)("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__ */ (0, import_jsx_runtime7.jsxs)(
       "button",
@@ -2242,66 +2239,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__ */ (0, import_jsx_runtime7.jsxs)("span", { className: `sia-picker-range-control__field${startFloating.className}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `sia-picker-range-control__value${currentValue[0] ? "" : " is-placeholder"}`, children: currentValue[0] ? formatValue(currentValue[0]) : placeholder[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { "data-range-endpoint": "0", className: `sia-picker-range-control__field${startFloating.className}${visible && activeIndex === 0 ? " is-active" : ""}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `sia-picker-range-control__value${displayValue[0] ? "" : " is-placeholder"}`, children: displayValue[0] ? formatValue(displayValue[0]) : placeholder[0] }),
             startFloating.label
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sia-picker-range-control__separator", children: separator }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: `sia-picker-range-control__field${endFloating.className}`, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `sia-picker-range-control__value${currentValue[1] ? "" : " is-placeholder"}`, children: currentValue[1] ? formatValue(currentValue[1]) : placeholder[1] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { "data-range-endpoint": "1", className: `sia-picker-range-control__field${endFloating.className}${visible && activeIndex === 1 ? " is-active" : ""}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `sia-picker-range-control__value${displayValue[1] ? "" : " is-placeholder"}`, children: displayValue[1] ? formatValue(displayValue[1]) : placeholder[1] }),
             endFloating.label
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sia-picker__icon", "aria-hidden": "true", children: suffixIcon ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "calendar", size: 16 }) })
         ]
       }
     ),
-    allowClear && (currentValue[0] || currentValue[1]) && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65E5\u671F\u8303\u56F4", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(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__ */ (0, import_jsx_runtime7.jsx)("div", { className: "sia-date-panel__body", children: showTime ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "sia-date-panel__range-date-time", children: compactDateTime ? renderDateTimeGroup(activeIndex) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        renderDateTimeGroup(0),
-        renderDateTimeGroup(1)
-      ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "sia-date-panel__range-calendars", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: "sia-date-panel__calendar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            CalendarHeader,
-            {
-              month: viewMonth,
-              range: true,
-              onPreviousYear: () => setViewMonth(addMonths(viewMonth, -12)),
-              onPreviousMonth: () => setViewMonth(addMonths(viewMonth, -1))
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CalendarMonth, { month: viewMonth, range: rangeDates, previewEnd: activeIndex === 1 ? hoverDate : "", disabledDate: isDisabled, onSelect: selectDate, onHover: activeIndex === 1 ? setHoverDate : void 0 })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: "sia-date-panel__calendar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            CalendarHeader,
-            {
-              month: addMonths(viewMonth, 1),
-              range: true,
-              onNextMonth: () => setViewMonth(addMonths(viewMonth, 1)),
-              onNextYear: () => setViewMonth(addMonths(viewMonth, 12))
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65E5\u671F\u8303\u56F4", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "sia-date-panel__body", children: [
+        presets?.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("aside", { className: "sia-date-panel__presets", "aria-label": "\u5FEB\u6377\u65E5\u671F\u8303\u56F4", children: presets.map((preset2, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => applyPreset(preset2), children: preset2.label }, index)) }) : null,
+        showTime ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "sia-date-panel__range-date-time", children: renderDateTimeGroup(activeIndex) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "sia-date-panel__range-calendars", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: "sia-date-panel__calendar", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              CalendarHeader,
+              {
+                month: viewMonth,
+                range: true,
+                onPreviousYear: () => setViewMonth(addMonths(viewMonth, -12)),
+                onPreviousMonth: () => setViewMonth(addMonths(viewMonth, -1))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CalendarMonth, { month: viewMonth, range: rangeDates, previewEnd: activeIndex === 1 ? hoverDate : "", disabledDate: isDisabled, onSelect: selectDate, onHover: activeIndex === 1 ? setHoverDate : void 0 })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: "sia-date-panel__calendar", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              CalendarHeader,
+              {
+                month: addMonths(viewMonth, 1),
+                range: true,
+                onNextMonth: () => setViewMonth(addMonths(viewMonth, 1)),
+                onNextYear: () => setViewMonth(addMonths(viewMonth, 12))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CalendarMonth, { month: addMonths(viewMonth, 1), range: rangeDates, previewEnd: activeIndex === 1 ? hoverDate : "", disabledDate: isDisabled, onSelect: selectDate, onHover: activeIndex === 1 ? setHoverDate : void 0 })
+          ] })
         ] })
-      ] }) }),
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         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__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
             renderExtraFooter?.(),
-            presets?.map((preset2, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => applyPreset(preset2), children: preset2.label }, index)),
-            compactDateTime && showTime && activeIndex === 1 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => {
-              setActiveIndex(0);
-              setViewMonth(startOfMonth(parseDate(dayFromValue(draftValue[0])) ?? /* @__PURE__ */ new Date()));
-            }, children: "\u4E0A\u4E00\u6B65" }) : null,
             invalidDateTimeRange ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("small", { className: "sia-date-panel__range-error", children: "\u7ED3\u675F\u65F6\u95F4\u4E0D\u80FD\u65E9\u4E8E\u5F00\u59CB\u65F6\u95F4" }) : maxRangeDays ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("small", { children: [
               "\u6700\u591A\u9009\u62E9 ",
               maxRangeDays,
@@ -2893,38 +2892,66 @@ var activeTooltipClose;
 function clampFloating(value, min, max) {
   return Math.min(Math.max(value, min), Math.max(min, max));
 }
-function resolveFloatingPosition(trigger, overlay, placement) {
+function normalizeFloatingPlacement(placement) {
+  const aliases = {
+    topLeft: "top-start",
+    topRight: "top-end",
+    bottomLeft: "bottom-start",
+    bottomRight: "bottom-end",
+    leftTop: "left-start",
+    leftBottom: "left-end",
+    rightTop: "right-start",
+    rightBottom: "right-end"
+  };
+  return aliases[placement] ?? placement;
+}
+function resolveFloatingPosition(trigger, overlay, placement, pointAtCenter, adjust) {
   const viewportWidth = document.documentElement.clientWidth;
   const viewportHeight = document.documentElement.clientHeight;
-  let resolvedPlacement = placement;
-  if (placement.startsWith("top") && trigger.top - overlay.height - FLOATING_GAP < FLOATING_VIEWPORT_PADDING && trigger.bottom + overlay.height + FLOATING_GAP <= viewportHeight - FLOATING_VIEWPORT_PADDING) {
-    resolvedPlacement = placement.replace("top", "bottom");
-  } else if (placement.startsWith("bottom") && trigger.bottom + overlay.height + FLOATING_GAP > viewportHeight - FLOATING_VIEWPORT_PADDING && trigger.top - overlay.height - FLOATING_GAP >= FLOATING_VIEWPORT_PADDING) {
-    resolvedPlacement = placement.replace("bottom", "top");
-  } else if (placement === "left" && trigger.left - overlay.width - FLOATING_GAP < FLOATING_VIEWPORT_PADDING && trigger.right + overlay.width + FLOATING_GAP <= viewportWidth - FLOATING_VIEWPORT_PADDING) {
-    resolvedPlacement = "right";
-  } else if (placement === "right" && trigger.right + overlay.width + FLOATING_GAP > viewportWidth - FLOATING_VIEWPORT_PADDING && trigger.left - overlay.width - FLOATING_GAP >= FLOATING_VIEWPORT_PADDING) {
-    resolvedPlacement = "left";
-  }
-  let top = trigger.top;
-  let left = trigger.left;
-  if (resolvedPlacement.startsWith("top") || resolvedPlacement.startsWith("bottom")) {
-    top = resolvedPlacement.startsWith("top") ? trigger.top - overlay.height - FLOATING_GAP : trigger.bottom + FLOATING_GAP;
-    left = resolvedPlacement.endsWith("-start") ? trigger.left : resolvedPlacement.endsWith("-end") ? trigger.right - overlay.width : trigger.left + (trigger.width - overlay.width) / 2;
-  } else {
-    top = trigger.top + (trigger.height - overlay.height) / 2;
-    left = resolvedPlacement === "left" ? trigger.left - overlay.width - FLOATING_GAP : trigger.right + FLOATING_GAP;
-  }
-  top = clampFloating(top, FLOATING_VIEWPORT_PADDING, viewportHeight - overlay.height - FLOATING_VIEWPORT_PADDING);
-  left = clampFloating(left, FLOATING_VIEWPORT_PADDING, viewportWidth - overlay.width - FLOATING_VIEWPORT_PADDING);
-  const result = { top, left, placement: resolvedPlacement };
-  if (resolvedPlacement.startsWith("top") || resolvedPlacement.startsWith("bottom")) {
-    result.arrowX = resolvedPlacement.endsWith("-start") ? clampFloating(FLOATING_ARROW_EDGE_OFFSET, 8, overlay.width - 16) : resolvedPlacement.endsWith("-end") ? clampFloating(overlay.width - FLOATING_ARROW_EDGE_OFFSET - 8, 8, overlay.width - 16) : clampFloating(trigger.left + trigger.width / 2 - left - 4, 8, overlay.width - 16);
-  } else {
-    result.arrowY = clampFloating(trigger.top + trigger.height / 2 - top - 4, 8, overlay.height - 16);
+  let resolvedPlacement = normalizeFloatingPlacement(placement);
+  const side = resolvedPlacement.split("-")[0];
+  const available = { top: trigger.top, bottom: viewportHeight - trigger.bottom, left: trigger.left, right: viewportWidth - trigger.right };
+  const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
+  const preferred = side;
+  const other = opposite[preferred];
+  const needed = (side === "top" || side === "bottom" ? overlay.height : overlay.width) + FLOATING_GAP + FLOATING_VIEWPORT_PADDING;
+  if (adjust && available[preferred] < needed && available[other] > available[preferred]) {
+    resolvedPlacement = resolvedPlacement.replace(preferred, other);
+  }
+  const vertical = resolvedPlacement.startsWith("top") || resolvedPlacement.startsWith("bottom");
+  const start = resolvedPlacement.endsWith("-start");
+  const end = resolvedPlacement.endsWith("-end");
+  let top = vertical ? resolvedPlacement.startsWith("top") ? trigger.top - overlay.height - FLOATING_GAP : trigger.bottom + FLOATING_GAP : start ? trigger.top : end ? trigger.bottom - overlay.height : trigger.top + (trigger.height - overlay.height) / 2;
+  let left = vertical ? start ? trigger.left : end ? trigger.right - overlay.width : trigger.left + (trigger.width - overlay.width) / 2 : resolvedPlacement.startsWith("left") ? trigger.left - overlay.width - FLOATING_GAP : trigger.right + FLOATING_GAP;
+  if (adjust) {
+    if (vertical) left = clampFloating(left, FLOATING_VIEWPORT_PADDING, viewportWidth - overlay.width - FLOATING_VIEWPORT_PADDING);
+    else top = clampFloating(top, FLOATING_VIEWPORT_PADDING, viewportHeight - overlay.height - FLOATING_VIEWPORT_PADDING);
   }
+  const result = { top, left, placement: resolvedPlacement };
+  const size = vertical ? trigger.width : trigger.height;
+  const anchorStart = vertical ? trigger.left : trigger.top;
+  const edge = Math.min(size / 2, FLOATING_ARROW_EDGE_OFFSET + 4);
+  const target = anchorStart + (pointAtCenter || !start && !end ? size / 2 : start ? edge : size - edge);
+  if (vertical) result.arrowX = clampFloating(target - left - 4, 8, overlay.width - 16);
+  else result.arrowY = clampFloating(target - top - 4, 8, overlay.height - 16);
   return result;
 }
+function isFloatingAnchorHidden(anchor, rect) {
+  let left = 0, top = 0, right = document.documentElement.clientWidth, bottom = document.documentElement.clientHeight;
+  for (let parent = anchor.parentElement; parent; parent = parent.parentElement) {
+    const css = getComputedStyle(parent);
+    const bounds = parent.getBoundingClientRect();
+    if (/(auto|scroll|hidden|clip)/.test(css.overflowX)) {
+      left = Math.max(left, bounds.left);
+      right = Math.min(right, bounds.right);
+    }
+    if (/(auto|scroll|hidden|clip)/.test(css.overflowY)) {
+      top = Math.max(top, bounds.top);
+      bottom = Math.min(bottom, bounds.bottom);
+    }
+  }
+  return rect.right <= left || rect.left >= right || rect.bottom <= top || rect.top >= bottom;
+}
 function Floating({
   children,
   content,
@@ -2935,6 +2962,7 @@ function Floating({
   mouseEnterDelay = 0.1,
   mouseLeaveDelay = 0.1,
   arrow = true,
+  autoAdjustOverflow = true,
   color,
   className = "",
   overlayClassName = "",
@@ -2942,6 +2970,7 @@ function Floating({
   onOpenChange
 }) {
   const rootRef = (0, import_react13.useRef)(null);
+  const triggerElementRef = (0, import_react13.useRef)(null);
   const overlayRef = (0, import_react13.useRef)(null);
   const enterTimer = (0, import_react13.useRef)();
   const leaveTimer = (0, import_react13.useRef)();
@@ -2993,28 +3022,42 @@ function Floating({
       setPosition(void 0);
       return;
     }
+    const getAnchor = () => {
+      const root = rootRef.current;
+      const target = triggerElementRef.current;
+      return target && root?.contains(target) ? target : root?.firstElementChild ?? root;
+    };
     const update = () => {
       if (!rootRef.current || !overlayRef.current) return;
-      setPosition(resolveFloatingPosition(rootRef.current.getBoundingClientRect(), overlayRef.current.getBoundingClientRect(), placement));
+      const anchor2 = getAnchor();
+      if (anchor2) {
+        const rect = anchor2.getBoundingClientRect();
+        const next = resolveFloatingPosition(rect, overlayRef.current.getBoundingClientRect(), placement, typeof arrow === "object" && !!arrow.pointAtCenter, autoAdjustOverflow);
+        next.hidden = isFloatingAnchorHidden(anchor2, rect);
+        setPosition(next);
+      }
     };
     update();
     window.addEventListener("resize", update);
     window.addEventListener("scroll", update, true);
     const observer = new ResizeObserver(update);
     if (rootRef.current) observer.observe(rootRef.current);
+    const anchor = getAnchor();
+    if (anchor) observer.observe(anchor);
     if (overlayRef.current) observer.observe(overlayRef.current);
     return () => {
       window.removeEventListener("resize", update);
       window.removeEventListener("scroll", update, true);
       observer.disconnect();
     };
-  }, [children, content, placement, visible]);
+  }, [children, content, placement, visible, autoAdjustOverflow, typeof arrow === "object" && arrow.pointAtCenter]);
   (0, import_react13.useEffect)(() => () => {
     clearTimers();
     if (activeTooltipClose === closeSelfRef.current) activeTooltipClose = void 0;
   }, []);
   const child = (0, import_react13.cloneElement)(children, {
     ...triggers.includes("hover") ? { onMouseEnter: (event) => {
+      triggerElementRef.current = event.currentTarget;
       children.props.onMouseEnter?.(event);
       show(mouseEnterDelay);
     }, onMouseLeave: (event) => {
@@ -3022,6 +3065,7 @@ function Floating({
       hide(mouseLeaveDelay);
     } } : {},
     ...triggers.includes("focus") ? { onFocus: (event) => {
+      triggerElementRef.current = event.currentTarget;
       children.props.onFocus?.(event);
       show();
     }, onBlur: (event) => {
@@ -3029,6 +3073,7 @@ function Floating({
       hide();
     } } : {},
     ...triggers.includes("click") ? { onClick: (event) => {
+      triggerElementRef.current = event.currentTarget;
       children.props.onClick?.(event);
       if (visible) closeNow();
       else openNow();
@@ -3043,14 +3088,14 @@ function Floating({
         id: contentId,
         role,
         "data-custom-color": color ? "" : void 0,
-        className: `sia-floating__overlay sia-floating__overlay--${position?.placement ?? placement} ${overlayClassName}`.trim(),
+        className: `sia-floating__overlay sia-floating__overlay--${position?.placement ?? normalizeFloatingPlacement(placement)} ${overlayClassName}`.trim(),
         style: {
           "--sia-floating-color": color,
           "--sia-floating-arrow-x": position?.arrowX == null ? void 0 : `${position.arrowX}px`,
           "--sia-floating-arrow-y": position?.arrowY == null ? void 0 : `${position.arrowY}px`,
           top: position?.top ?? 0,
           left: position?.left ?? 0,
-          visibility: position ? "visible" : "hidden"
+          visibility: position && !position.hidden ? "visible" : "hidden"
         },
         onMouseEnter: triggers.includes("hover") ? () => show() : void 0,
         onMouseLeave: triggers.includes("hover") ? () => hide(mouseLeaveDelay) : void 0,

package/dist/select-date-range.d.cts

@@ -1,4 +1,4 @@
-export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-CtA-B8DB.cjs';
+export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-2galnCvZ.cjs';
 import 'react';
 import './shared-Bx4B28Wh.cjs';
 import './Select-YJbT-MF1.cjs';

package/dist/select-date-range.d.ts

@@ -1,4 +1,4 @@
-export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-D9W_mmMq.js';
+export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-Dtj6XF9I.js';
 import 'react';
 import './shared-Bx4B28Wh.js';
 import './Select-CCrPqULn.js';

package/dist/select-date-range.js

@@ -1,7 +1,7 @@
 import {
   SelectDateRange
-} from "./chunk-GLS4WVIZ.js";
-import "./chunk-LRGD2QDA.js";
+} from "./chunk-LWVZEUGJ.js";
+import "./chunk-3Q3S6CDZ.js";
 import "./chunk-XCVAVCIO.js";
 import "./chunk-IKAMZNCK.js";
 import "./chunk-H7IAG72O.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.39",
+  "version": "0.1.41",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",