@sia.soul/sia-react-ui 0.1.44 → 0.1.46

package/dist/{select-date-range-Dtj6XF9I.d.ts → select-date-range-B1ZWIHoe.d.ts}

@@ -142,7 +142,7 @@ interface DateRangePickerProps extends Omit<DatePickerProps, "value" | "defaultV
     /** 值发生变化时调用；参数为新值及类型声明中列出的关联信息。 */
     onChange?: (value: readonly [string, string]) => void;
 }
-/** 日期范围选择；纯日期按两次点击组成范围，带时间时使用单面板分步设置起止值并确认提交。 */
+/** 日期范围选择；纯日期按两次点击组成范围，带时间时使用单面板分步设置起止值并确认提交，活动底线随编辑端点平滑移动。 */
 declare function DateRangePicker({ value, defaultValue, placeholder, placeholderMode, separator, presets, maxRangeDays, allowEmpty, endpointDisabled, size: sizeProp, status, allowClear, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, disabledDate, disabled, className, onCalendarChange, onChange, onOpenChange, formatValue, renderExtraFooter, ...props }: DateRangePickerProps): react.JSX.Element;
 /** 日期选择组件。 */
 declare function DatePicker({ value, defaultValue, picker, size: sizeProp, status, allowClear, multiple, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, presets, disabledDate, disabled, className, onChange, onOpenChange, placeholder, placeholderMode, formatValue, renderExtraFooter, ...props }: DatePickerProps): react.JSX.Element;

package/dist/{select-date-range-2galnCvZ.d.cts → select-date-range-CyfCT32j.d.cts}

@@ -142,7 +142,7 @@ interface DateRangePickerProps extends Omit<DatePickerProps, "value" | "defaultV
     /** 值发生变化时调用；参数为新值及类型声明中列出的关联信息。 */
     onChange?: (value: readonly [string, string]) => void;
 }
-/** 日期范围选择；纯日期按两次点击组成范围，带时间时使用单面板分步设置起止值并确认提交。 */
+/** 日期范围选择；纯日期按两次点击组成范围，带时间时使用单面板分步设置起止值并确认提交，活动底线随编辑端点平滑移动。 */
 declare function DateRangePicker({ value, defaultValue, placeholder, placeholderMode, separator, presets, maxRangeDays, allowEmpty, endpointDisabled, size: sizeProp, status, allowClear, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, disabledDate, disabled, className, onCalendarChange, onChange, onOpenChange, formatValue, renderExtraFooter, ...props }: DateRangePickerProps): react.JSX.Element;
 /** 日期选择组件。 */
 declare function DatePicker({ value, defaultValue, picker, size: sizeProp, status, allowClear, multiple, needConfirm, showTime, showToday, open, defaultOpen, suffixIcon, minDate, maxDate, presets, disabledDate, disabled, className, onChange, onOpenChange, placeholder, placeholderMode, formatValue, renderExtraFooter, ...props }: DatePickerProps): react.JSX.Element;

package/dist/select-date-range.cjs

@@ -2005,6 +2005,24 @@ function DateRangePicker({
   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)(endpointDisabled[0] || currentValue[0] && !currentValue[1] ? 1 : 0);
+  const indicatorRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useLayoutEffect)(() => {
+    const field = rootRef.current?.querySelector(`[data-range-endpoint="${activeIndex}"]`);
+    const indicator = indicatorRef.current;
+    if (!field || !indicator) return;
+    const alignIndicator = () => {
+      indicator.style.transform = `translateX(${field.offsetLeft}px)`;
+      indicator.style.width = `${field.offsetWidth}px`;
+    };
+    alignIndicator();
+    const observer = new ResizeObserver(alignIndicator);
+    const trigger = field.parentElement;
+    if (trigger) {
+      observer.observe(trigger);
+      for (const child of trigger.children) if (child !== indicator) observer.observe(child);
+    }
+    return () => observer.disconnect();
+  });
   const [confirmedIndex, setConfirmedIndex] = (0, import_react7.useState)(null);
   const [presetSelected, setPresetSelected] = (0, import_react7.useState)(false);
   const [hoverDate, setHoverDate] = (0, import_react7.useState)("");
@@ -2271,6 +2289,7 @@ function DateRangePicker({
             /* @__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", { ref: indicatorRef, className: "sia-picker-range-control__indicator", "aria-hidden": "true" }),
           /* @__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 }) })
         ]
       }

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-2galnCvZ.cjs';
+export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-CyfCT32j.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-Dtj6XF9I.js';
+export { S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-B1ZWIHoe.js';
 import 'react';
 import './shared-Bx4B28Wh.js';
 import './Select-CCrPqULn.js';

package/dist/select-date-range.js

@@ -1,6 +1,6 @@
 import {
   SelectDateRange
-} from "./chunk-QIXU7N4X.js";
+} from "./chunk-E4RMSZOC.js";
 import "./chunk-NYJSSPIX.js";
 import "./chunk-XCVAVCIO.js";
 import "./chunk-IKAMZNCK.js";

package/package.json

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