@sia.soul/sia-react-ui 0.1.45 → 0.1.47

package/dist/{chunk-QIXU7N4X.js → chunk-E4RMSZOC.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk-H7IAG72O.js";
 
 // src/components/DatePicker.tsx
-import { useEffect, useId, useMemo, useRef as useRef2, useState } from "react";
+import { useEffect, useId, useLayoutEffect as useLayoutEffect2, useMemo, useRef as useRef2, useState } from "react";
 
 // src/components/DatePickerPanel.tsx
 import { useLayoutEffect, useRef } from "react";
@@ -496,6 +496,24 @@ function DateRangePicker({
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
   const [draftValue, setDraftValue] = useState(currentValue);
   const [activeIndex, setActiveIndex] = useState(endpointDisabled[0] || currentValue[0] && !currentValue[1] ? 1 : 0);
+  const indicatorRef = useRef2(null);
+  useLayoutEffect2(() => {
+    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] = useState(null);
   const [presetSelected, setPresetSelected] = useState(false);
   const [hoverDate, setHoverDate] = useState("");
@@ -762,6 +780,7 @@ function DateRangePicker({
             /* @__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", { ref: indicatorRef, className: "sia-picker-range-control__indicator", "aria-hidden": "true" }),
           /* @__PURE__ */ jsx2("span", { className: "sia-picker__icon", "aria-hidden": "true", children: suffixIcon ?? /* @__PURE__ */ jsx2(Icon, { name: "calendar", size: 16 }) })
         ]
       }

package/dist/core.css

@@ -121,15 +121,26 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   min-width: 0;
   height: 100%;
 }
-.sia-picker-range-control__field.is-active::after {
-  content: "";
+.sia-picker-range-control > .sia-picker__trigger {
+  position: relative;
+}
+.sia-picker-range-control__indicator {
   position: absolute;
-  right: 0;
   bottom: -1px;
   left: 0;
   height: 3px;
   background: var(--sia-color-primary);
   pointer-events: none;
+  visibility: hidden;
+}
+.sia-picker-range-control.is-open .sia-picker-range-control__indicator {
+  visibility: visible;
+  transition: transform 220ms ease, width 220ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-picker-range-control.is-open .sia-picker-range-control__indicator {
+    transition: none;
+  }
 }
 .sia-picker-range-control__field.sia-placeholder-floating > .is-placeholder {
   color: transparent;

package/dist/index.cjs

@@ -5915,6 +5915,7 @@ var DrawerRoot = (0, import_react28.forwardRef)(function Drawer({
   ...props
 }, forwardedRef) {
   const localRef = (0, import_react28.useRef)(null);
+  const bodyRef = (0, import_react28.useRef)(null);
   const titleId = (0, import_react28.useId)();
   const drawerId = (0, import_react28.useId)();
   const parentStack = (0, import_react28.useContext)(DrawerStackContext);
@@ -6008,7 +6009,8 @@ var DrawerRoot = (0, import_react28.forwardRef)(function Drawer({
             ] }),
             extra ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "sia-drawer__extra", children: extra }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "sia-drawer__body", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref: bodyRef, className: "sia-drawer__body", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FloatingScrollbarProvider, { targetRef: bodyRef }),
           footer ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "sia-drawer__footer", children: footer }) : null
         ]
       }
@@ -7487,6 +7489,24 @@ function DateRangePicker({
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
   const [draftValue, setDraftValue] = (0, import_react34.useState)(currentValue);
   const [activeIndex, setActiveIndex] = (0, import_react34.useState)(endpointDisabled[0] || currentValue[0] && !currentValue[1] ? 1 : 0);
+  const indicatorRef = (0, import_react34.useRef)(null);
+  (0, import_react34.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_react34.useState)(null);
   const [presetSelected, setPresetSelected] = (0, import_react34.useState)(false);
   const [hoverDate, setHoverDate] = (0, import_react34.useState)("");
@@ -7753,6 +7773,7 @@ function DateRangePicker({
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: `sia-picker-range-control__value${displayValue[1] ? "" : " is-placeholder"}`, children: displayValue[1] ? formatValue2(displayValue[1]) : placeholder[1] }),
             endFloating.label
           ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { ref: indicatorRef, className: "sia-picker-range-control__indicator", "aria-hidden": "true" }),
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "sia-picker__icon", "aria-hidden": "true", children: suffixIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "calendar", size: 16 }) })
         ]
       }
@@ -11994,6 +12015,12 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
       ctx.clearRect(0, 0, width, height);
       const style = getComputedStyle(scroller);
       const foreground = style.color;
+      const readyCells = /* @__PURE__ */ new Map();
+      scroller.querySelectorAll("tr[data-canvas-row-index]").forEach((element) => {
+        const keys = /* @__PURE__ */ new Set();
+        element.querySelectorAll('[data-canvas-dom-ready="true"]').forEach((cell) => keys.add(cell.dataset.columnKey));
+        readyCells.set(Number(element.dataset.canvasRowIndex), keys);
+      });
       ctx.font = `${style.fontSize} ${style.fontFamily}`;
       ctx.textBaseline = "middle";
       const leftWidth = columns.reduce((n, c) => n + (normalizeFixed(c.fixed) === "left" ? widths.get(c.key) ?? 160 : 0), 0);
@@ -12011,7 +12038,7 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
       const first = Math.max(0, Math.floor(scroller.scrollTop / rowHeight));
       const last = Math.min(rows.length, Math.ceil((scroller.scrollTop + height) / rowHeight));
       for (const { column, x, cellWidth, fixed } of geometry) {
-        if (x + cellWidth <= 0 || x >= width || !column.canvasRender && column.render) continue;
+        if (x + cellWidth <= 0 || x >= width) continue;
         const clipLeft = Math.max(x, fixed ? 0 : leftWidth);
         const clipRight = Math.min(x + cellWidth, fixed ? width : width - rightWidth);
         if (clipRight <= clipLeft) continue;
@@ -12021,12 +12048,26 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
         ctx.clip();
         for (let index = first; index < last; index++) {
           const row = rows[index];
-          const value = getTableValue(row.record, column.dataIndex, column.code ?? column.key);
-          const content = column.canvasRender ? column.canvasRender(value, row.record, row.sourceIndex, { row, rowIndex: index, column }) : { text: value == null ? "" : String(value) };
-          if (!content?.text) continue;
           const y = headerHeight + index * rowHeight - scroller.scrollTop + rowHeight / 2;
-          const available = Math.max(0, cellWidth - (content.background ? 32 : 16));
-          let text = content.text;
+          if (!column.canvasRender && column.render) {
+            if (!readyCells.get(index)?.has(column.key)) {
+              const skeletonWidth = Math.max(0, Math.min(cellWidth - 24, 120));
+              const skeletonX = column.align === "right" ? x + cellWidth - skeletonWidth - 8 : column.align === "center" ? x + (cellWidth - skeletonWidth) / 2 : x + 8;
+              ctx.save();
+              ctx.fillStyle = foreground;
+              ctx.globalAlpha = 0.12;
+              ctx.beginPath();
+              ctx.roundRect(skeletonX, y - 6, skeletonWidth, 12, 4);
+              ctx.fill();
+              ctx.restore();
+            }
+            continue;
+          }
+          const value = getTableValue(row.record, column.dataIndex, column.code ?? column.key);
+          const content2 = column.canvasRender ? column.canvasRender(value, row.record, row.sourceIndex, { row, rowIndex: index, column }) : { text: value == null ? "" : String(value) };
+          if (!content2?.text) continue;
+          const available = Math.max(0, cellWidth - (content2.background ? 32 : 16));
+          let text = content2.text;
           if (ctx.measureText(text).width > available) {
             let lo = 0, hi = text.length;
             while (lo < hi) {
@@ -12037,16 +12078,16 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
             text = text.slice(0, lo) + "\u2026";
           }
           const textWidth = ctx.measureText(text).width;
-          const total = textWidth + (content.background ? 16 : 0);
+          const total = textWidth + (content2.background ? 16 : 0);
           const tx = column.align === "right" ? x + cellWidth - total - 8 : column.align === "center" ? x + (cellWidth - total) / 2 : x + 8;
-          if (content.background) {
-            ctx.fillStyle = content.background;
+          if (content2.background) {
+            ctx.fillStyle = content2.background;
             ctx.beginPath();
             ctx.roundRect(tx, y - 12, total, 24, 4);
             ctx.fill();
           }
-          ctx.fillStyle = content.color ?? foreground;
-          ctx.fillText(text, tx + (content.background ? 8 : 0), y);
+          ctx.fillStyle = content2.color ?? foreground;
+          ctx.fillText(text, tx + (content2.background ? 8 : 0), y);
         }
         ctx.restore();
       }
@@ -12057,6 +12098,8 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
     scroller.addEventListener("scroll", schedule, { passive: true });
     const resize = new ResizeObserver(schedule);
     resize.observe(scroller);
+    const content = new MutationObserver(schedule);
+    content.observe(scroller, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-canvas-row-index", "data-canvas-dom-ready", "data-column-key"] });
     const theme = new MutationObserver(schedule);
     theme.observe(document.documentElement, { attributes: true });
     window.addEventListener("resize", schedule);
@@ -12064,6 +12107,7 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
     return () => {
       cancelAnimationFrame(frame);
       resize.disconnect();
+      content.disconnect();
       theme.disconnect();
       scroller.removeEventListener("scroll", schedule);
       window.removeEventListener("resize", schedule);
@@ -14613,6 +14657,7 @@ var TableBodyRow = (0, import_react52.memo)(function TableBodyRow2({
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "tr",
     {
+      "data-canvas-row-index": canvas ? rowIndex : void 0,
       className: `sia-table__row${striped && rowIndex % 2 === 1 ? " sia-table__row--striped" : ""} ${className}`.trim(),
       style: { height: rowHeight },
       onClick,
@@ -14638,6 +14683,7 @@ var TableBodyRow = (0, import_react52.memo)(function TableBodyRow2({
           "td",
           {
             "data-column-key": column.key,
+            "data-canvas-dom-ready": canvas && (pluginCellProps.content !== void 0 || !column.canvasRender && column.render) ? "true" : void 0,
             "aria-label": canvas ? column.canvasRender?.(value, row.record, row.sourceIndex, { row, rowIndex, column })?.text ?? (value == null ? "" : String(value)) : void 0,
             rowSpan: pluginCellProps.rowSpan,
             colSpan: pluginCellProps.colSpan,

package/dist/index.css

@@ -121,15 +121,26 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   min-width: 0;
   height: 100%;
 }
-.sia-picker-range-control__field.is-active::after {
-  content: "";
+.sia-picker-range-control > .sia-picker__trigger {
+  position: relative;
+}
+.sia-picker-range-control__indicator {
   position: absolute;
-  right: 0;
   bottom: -1px;
   left: 0;
   height: 3px;
   background: var(--sia-color-primary);
   pointer-events: none;
+  visibility: hidden;
+}
+.sia-picker-range-control.is-open .sia-picker-range-control__indicator {
+  visibility: visible;
+  transition: transform 220ms ease, width 220ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-picker-range-control.is-open .sia-picker-range-control__indicator {
+    transition: none;
+  }
 }
 .sia-picker-range-control__field.sia-placeholder-floating > .is-placeholder {
   color: transparent;

package/dist/index.d.cts

@@ -5,7 +5,7 @@ import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttribut
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.cjs';
 import { O as OverlayContainer, a as OverlayApiHandle, M as ModalOpenConfig, S as SelectOption, b as SelectChangeValue, c as SelectProps, d as ModalActionResult, B as ButtonProps, e as ButtonSize } from './Select-YJbT-MF1.cjs';
 export { f as Button, g as ButtonVariant, h as Modal, i as ModalProps, j as ModalType, k as Select, l as SelectMode, m as SelectValue } from './Select-YJbT-MF1.cjs';
-export { D as DatePicker, a as DatePickerDisabledInfo, b as DatePickerPreset, c as DatePickerProps, d as DatePickerShowTime, e as DatePickerType, f as DatePickerValue, g as DateRangePickerPreset, h as DateRangePickerProps, S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-2galnCvZ.cjs';
+export { D as DatePicker, a as DatePickerDisabledInfo, b as DatePickerPreset, c as DatePickerProps, d as DatePickerShowTime, e as DatePickerType, f as DatePickerValue, g as DateRangePickerPreset, h as DateRangePickerProps, S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-CyfCT32j.cjs';
 export { RichTextContent, RichTextContentFormat, RichTextContentProps, RichTextEditor, RichTextEditorProps, RichTextImagePasteHandler, RichTextToolbar } from './rich-text-editor.cjs';
 export { MarkdownEditor, MarkdownEditorMode, MarkdownEditorProps } from './markdown-editor.cjs';
 import * as Monaco from 'monaco-editor';
@@ -585,7 +585,7 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     open: boolean;
     /** 标题内容，可传入文本或 React 节点。 */
     title?: ReactNode;
-    /** 子内容；组件嵌套内容或当前节点的子项。 */
+    /** 抽屉主体内容；溢出时默认使用不占布局空间的浮动滚动条，标题及底部操作区保持固定。 */
     children?: ReactNode;
     /** 主体之外的补充内容或操作区。 */
     extra?: ReactNode;
@@ -640,7 +640,7 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
 interface DrawerOpenConfig extends Omit<DrawerProps, "open"> {
 }
 declare function openDrawer(config: DrawerOpenConfig): OverlayApiHandle<DrawerOpenConfig>;
-/** 抽屉组件。 */
+/** 从屏幕边缘展开的抽屉；主体默认使用浮动滚动条，支持四个方向、嵌套推移及静态 API 调用。 */
 declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>> & {
     /** 直接打开实例，返回可用于更新或关闭的操作句柄。 */
     open: typeof openDrawer;

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttribut
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.js';
 import { O as OverlayContainer, a as OverlayApiHandle, M as ModalOpenConfig, S as SelectOption, b as SelectChangeValue, c as SelectProps, d as ModalActionResult, B as ButtonProps, e as ButtonSize } from './Select-CCrPqULn.js';
 export { f as Button, g as ButtonVariant, h as Modal, i as ModalProps, j as ModalType, k as Select, l as SelectMode, m as SelectValue } from './Select-CCrPqULn.js';
-export { D as DatePicker, a as DatePickerDisabledInfo, b as DatePickerPreset, c as DatePickerProps, d as DatePickerShowTime, e as DatePickerType, f as DatePickerValue, g as DateRangePickerPreset, h as DateRangePickerProps, S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-Dtj6XF9I.js';
+export { D as DatePicker, a as DatePickerDisabledInfo, b as DatePickerPreset, c as DatePickerProps, d as DatePickerShowTime, e as DatePickerType, f as DatePickerValue, g as DateRangePickerPreset, h as DateRangePickerProps, S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-B1ZWIHoe.js';
 export { RichTextContent, RichTextContentFormat, RichTextContentProps, RichTextEditor, RichTextEditorProps, RichTextImagePasteHandler, RichTextToolbar } from './rich-text-editor.js';
 export { MarkdownEditor, MarkdownEditorMode, MarkdownEditorProps } from './markdown-editor.js';
 import * as Monaco from 'monaco-editor';
@@ -585,7 +585,7 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     open: boolean;
     /** 标题内容，可传入文本或 React 节点。 */
     title?: ReactNode;
-    /** 子内容；组件嵌套内容或当前节点的子项。 */
+    /** 抽屉主体内容；溢出时默认使用不占布局空间的浮动滚动条，标题及底部操作区保持固定。 */
     children?: ReactNode;
     /** 主体之外的补充内容或操作区。 */
     extra?: ReactNode;
@@ -640,7 +640,7 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
 interface DrawerOpenConfig extends Omit<DrawerProps, "open"> {
 }
 declare function openDrawer(config: DrawerOpenConfig): OverlayApiHandle<DrawerOpenConfig>;
-/** 抽屉组件。 */
+/** 从屏幕边缘展开的抽屉；主体默认使用浮动滚动条，支持四个方向、嵌套推移及静态 API 调用。 */
 declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>> & {
     /** 直接打开实例，返回可用于更新或关闭的操作句柄。 */
     open: typeof openDrawer;

package/dist/index.js

@@ -95,7 +95,7 @@ import {
   DatePicker,
   SelectDateRange,
   TimePanel
-} from "./chunk-QIXU7N4X.js";
+} from "./chunk-E4RMSZOC.js";
 import {
   Checkbox,
   FloatingScrollbarProvider,
@@ -1245,6 +1245,7 @@ var DrawerRoot = forwardRef(function Drawer({
   ...props
 }, forwardedRef) {
   const localRef = useRef4(null);
+  const bodyRef = useRef4(null);
   const titleId = useId2();
   const drawerId = useId2();
   const parentStack = useContext(DrawerStackContext);
@@ -1338,7 +1339,8 @@ var DrawerRoot = forwardRef(function Drawer({
             ] }),
             extra ? /* @__PURE__ */ jsx8("div", { className: "sia-drawer__extra", children: extra }) : null
           ] }),
-          /* @__PURE__ */ jsx8("div", { className: "sia-drawer__body", children }),
+          /* @__PURE__ */ jsx8("div", { ref: bodyRef, className: "sia-drawer__body", children }),
+          /* @__PURE__ */ jsx8(FloatingScrollbarProvider, { targetRef: bodyRef }),
           footer ? /* @__PURE__ */ jsx8("div", { className: "sia-drawer__footer", children: footer }) : null
         ]
       }
@@ -4785,6 +4787,12 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
       ctx.clearRect(0, 0, width, height);
       const style = getComputedStyle(scroller);
       const foreground = style.color;
+      const readyCells = /* @__PURE__ */ new Map();
+      scroller.querySelectorAll("tr[data-canvas-row-index]").forEach((element) => {
+        const keys = /* @__PURE__ */ new Set();
+        element.querySelectorAll('[data-canvas-dom-ready="true"]').forEach((cell) => keys.add(cell.dataset.columnKey));
+        readyCells.set(Number(element.dataset.canvasRowIndex), keys);
+      });
       ctx.font = `${style.fontSize} ${style.fontFamily}`;
       ctx.textBaseline = "middle";
       const leftWidth = columns.reduce((n, c) => n + (normalizeFixed(c.fixed) === "left" ? widths.get(c.key) ?? 160 : 0), 0);
@@ -4802,7 +4810,7 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
       const first = Math.max(0, Math.floor(scroller.scrollTop / rowHeight));
       const last = Math.min(rows.length, Math.ceil((scroller.scrollTop + height) / rowHeight));
       for (const { column, x, cellWidth, fixed } of geometry) {
-        if (x + cellWidth <= 0 || x >= width || !column.canvasRender && column.render) continue;
+        if (x + cellWidth <= 0 || x >= width) continue;
         const clipLeft = Math.max(x, fixed ? 0 : leftWidth);
         const clipRight = Math.min(x + cellWidth, fixed ? width : width - rightWidth);
         if (clipRight <= clipLeft) continue;
@@ -4812,12 +4820,26 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
         ctx.clip();
         for (let index = first; index < last; index++) {
           const row = rows[index];
-          const value = getTableValue(row.record, column.dataIndex, column.code ?? column.key);
-          const content = column.canvasRender ? column.canvasRender(value, row.record, row.sourceIndex, { row, rowIndex: index, column }) : { text: value == null ? "" : String(value) };
-          if (!content?.text) continue;
           const y = headerHeight + index * rowHeight - scroller.scrollTop + rowHeight / 2;
-          const available = Math.max(0, cellWidth - (content.background ? 32 : 16));
-          let text = content.text;
+          if (!column.canvasRender && column.render) {
+            if (!readyCells.get(index)?.has(column.key)) {
+              const skeletonWidth = Math.max(0, Math.min(cellWidth - 24, 120));
+              const skeletonX = column.align === "right" ? x + cellWidth - skeletonWidth - 8 : column.align === "center" ? x + (cellWidth - skeletonWidth) / 2 : x + 8;
+              ctx.save();
+              ctx.fillStyle = foreground;
+              ctx.globalAlpha = 0.12;
+              ctx.beginPath();
+              ctx.roundRect(skeletonX, y - 6, skeletonWidth, 12, 4);
+              ctx.fill();
+              ctx.restore();
+            }
+            continue;
+          }
+          const value = getTableValue(row.record, column.dataIndex, column.code ?? column.key);
+          const content2 = column.canvasRender ? column.canvasRender(value, row.record, row.sourceIndex, { row, rowIndex: index, column }) : { text: value == null ? "" : String(value) };
+          if (!content2?.text) continue;
+          const available = Math.max(0, cellWidth - (content2.background ? 32 : 16));
+          let text = content2.text;
           if (ctx.measureText(text).width > available) {
             let lo = 0, hi = text.length;
             while (lo < hi) {
@@ -4828,16 +4850,16 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
             text = text.slice(0, lo) + "\u2026";
           }
           const textWidth = ctx.measureText(text).width;
-          const total = textWidth + (content.background ? 16 : 0);
+          const total = textWidth + (content2.background ? 16 : 0);
           const tx = column.align === "right" ? x + cellWidth - total - 8 : column.align === "center" ? x + (cellWidth - total) / 2 : x + 8;
-          if (content.background) {
-            ctx.fillStyle = content.background;
+          if (content2.background) {
+            ctx.fillStyle = content2.background;
             ctx.beginPath();
             ctx.roundRect(tx, y - 12, total, 24, 4);
             ctx.fill();
           }
-          ctx.fillStyle = content.color ?? foreground;
-          ctx.fillText(text, tx + (content.background ? 8 : 0), y);
+          ctx.fillStyle = content2.color ?? foreground;
+          ctx.fillText(text, tx + (content2.background ? 8 : 0), y);
         }
         ctx.restore();
       }
@@ -4848,6 +4870,8 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
     scroller.addEventListener("scroll", schedule, { passive: true });
     const resize = new ResizeObserver(schedule);
     resize.observe(scroller);
+    const content = new MutationObserver(schedule);
+    content.observe(scroller, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-canvas-row-index", "data-canvas-dom-ready", "data-column-key"] });
     const theme = new MutationObserver(schedule);
     theme.observe(document.documentElement, { attributes: true });
     window.addEventListener("resize", schedule);
@@ -4855,6 +4879,7 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
     return () => {
       cancelAnimationFrame(frame);
       resize.disconnect();
+      content.disconnect();
       theme.disconnect();
       scroller.removeEventListener("scroll", schedule);
       window.removeEventListener("resize", schedule);
@@ -7404,6 +7429,7 @@ var TableBodyRow = memo(function TableBodyRow2({
   return /* @__PURE__ */ jsx23(
     "tr",
     {
+      "data-canvas-row-index": canvas ? rowIndex : void 0,
       className: `sia-table__row${striped && rowIndex % 2 === 1 ? " sia-table__row--striped" : ""} ${className}`.trim(),
       style: { height: rowHeight },
       onClick,
@@ -7429,6 +7455,7 @@ var TableBodyRow = memo(function TableBodyRow2({
           "td",
           {
             "data-column-key": column.key,
+            "data-canvas-dom-ready": canvas && (pluginCellProps.content !== void 0 || !column.canvasRender && column.render) ? "true" : void 0,
             "aria-label": canvas ? column.canvasRender?.(value, row.record, row.sourceIndex, { row, rowIndex, column })?.text ?? (value == null ? "" : String(value)) : void 0,
             rowSpan: pluginCellProps.rowSpan,
             colSpan: pluginCellProps.colSpan,

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.45",
+  "version": "0.1.47",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",