@sia.soul/sia-react-ui 0.1.53 → 0.1.55

package/dist/{chunk-MFR2FYQA.js → chunk-5OGT4AAS.js}

@@ -5,7 +5,7 @@ import {
   Popover,
   Tooltip,
   useOverlayLifecycle
-} from "./chunk-PJT676UK.js";
+} from "./chunk-F4XMRO6G.js";
 import {
   Dropdown,
   Icon

package/dist/{chunk-ZX2YNHQJ.js → chunk-7CAQPLKC.js}

@@ -1,7 +1,7 @@
 import {
   FloatingScrollbarProvider,
   Select
-} from "./chunk-PJT676UK.js";
+} from "./chunk-F4XMRO6G.js";
 import {
   Icon
 } from "./chunk-IUZ2RSI5.js";

package/dist/{chunk-PJT676UK.js → chunk-F4XMRO6G.js}

@@ -253,6 +253,11 @@ function Floating({
   const triggers = Array.isArray(trigger) ? trigger : [trigger];
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
   const [position, setPosition] = useState();
+  const [portalContainer, setPortalContainer] = useState(null);
+  useLayoutEffect(() => {
+    if (!visible) return;
+    setPortalContainer(rootRef.current?.closest(".sia-modal-root, .sia-drawer-root") ?? document.body);
+  });
   const setVisibleRef = useRef2(setVisible);
   setVisibleRef.current = setVisible;
   const closeSelfRef = useRef2();
@@ -315,6 +320,8 @@ function Floating({
     update();
     window.addEventListener("resize", update);
     window.addEventListener("scroll", update, true);
+    window.addEventListener("animationend", update, true);
+    window.addEventListener("transitionend", update, true);
     const observer = new ResizeObserver(update);
     if (rootRef.current) observer.observe(rootRef.current);
     const anchor = getAnchor();
@@ -323,9 +330,11 @@ function Floating({
     return () => {
       window.removeEventListener("resize", update);
       window.removeEventListener("scroll", update, true);
+      window.removeEventListener("animationend", update, true);
+      window.removeEventListener("transitionend", update, true);
       observer.disconnect();
     };
-  }, [children, content, placement, visible, autoAdjustOverflow, typeof arrow === "object" && arrow.pointAtCenter]);
+  }, [children, content, placement, visible, portalContainer, autoAdjustOverflow, typeof arrow === "object" && arrow.pointAtCenter]);
   useEffect2(() => () => {
     clearTimers();
     if (activeTooltipClose === closeSelfRef.current) activeTooltipClose = void 0;
@@ -380,7 +389,7 @@ function Floating({
         ]
       }
     ),
-    document.body
+    portalContainer ?? document.body
   ) : null;
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2("span", { ref: rootRef, className: `sia-floating ${className}`.trim(), children: child }),

package/dist/{core-DtGYdU61.d.cts → core-1iaQY0Is.d.cts}

@@ -877,7 +877,7 @@ declare const Dropdown: typeof DropdownRoot & {
 type FloatingPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
 /** 触发浮层显示的交互方式。 */
 type FloatingTrigger = "hover" | "focus" | "click";
-/** 文字提示的属性配置。 */
+/** 文字提示的属性配置；弹框或抽屉内的提示遵循所属容器的层级，不覆盖后续打开的子弹层。 */
 interface TooltipProps {
     /** 标题内容，可传入文本或 React 节点。 */
     title?: ReactNode;

package/dist/{core-DXJ4b0lT.d.ts → core-DoFob1fF.d.ts}

@@ -877,7 +877,7 @@ declare const Dropdown: typeof DropdownRoot & {
 type FloatingPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
 /** 触发浮层显示的交互方式。 */
 type FloatingTrigger = "hover" | "focus" | "click";
-/** 文字提示的属性配置。 */
+/** 文字提示的属性配置；弹框或抽屉内的提示遵循所属容器的层级，不覆盖后续打开的子弹层。 */
 interface TooltipProps {
     /** 标题内容，可传入文本或 React 节点。 */
     title?: ReactNode;

package/dist/core.cjs

@@ -2355,6 +2355,11 @@ function Floating({
   const triggers = Array.isArray(trigger) ? trigger : [trigger];
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
   const [position, setPosition] = (0, import_react13.useState)();
+  const [portalContainer, setPortalContainer] = (0, import_react13.useState)(null);
+  (0, import_react13.useLayoutEffect)(() => {
+    if (!visible) return;
+    setPortalContainer(rootRef.current?.closest(".sia-modal-root, .sia-drawer-root") ?? document.body);
+  });
   const setVisibleRef = (0, import_react13.useRef)(setVisible);
   setVisibleRef.current = setVisible;
   const closeSelfRef = (0, import_react13.useRef)();
@@ -2417,6 +2422,8 @@ function Floating({
     update();
     window.addEventListener("resize", update);
     window.addEventListener("scroll", update, true);
+    window.addEventListener("animationend", update, true);
+    window.addEventListener("transitionend", update, true);
     const observer = new ResizeObserver(update);
     if (rootRef.current) observer.observe(rootRef.current);
     const anchor = getAnchor();
@@ -2425,9 +2432,11 @@ function Floating({
     return () => {
       window.removeEventListener("resize", update);
       window.removeEventListener("scroll", update, true);
+      window.removeEventListener("animationend", update, true);
+      window.removeEventListener("transitionend", update, true);
       observer.disconnect();
     };
-  }, [children, content, placement, visible, autoAdjustOverflow, typeof arrow === "object" && arrow.pointAtCenter]);
+  }, [children, content, placement, visible, portalContainer, autoAdjustOverflow, typeof arrow === "object" && arrow.pointAtCenter]);
   (0, import_react13.useEffect)(() => () => {
     clearTimers();
     if (activeTooltipClose === closeSelfRef.current) activeTooltipClose = void 0;
@@ -2482,7 +2491,7 @@ function Floating({
         ]
       }
     ),
-    document.body
+    portalContainer ?? document.body
   ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { ref: rootRef, className: `sia-floating ${className}`.trim(), children: child }),

package/dist/core.css

@@ -4176,6 +4176,56 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   align-items: center;
   min-width: 0;
 }
+.sia-table__cell--tree-lines {
+  padding-block: 0;
+}
+.sia-table__cell--tree-lines > .sia-table__cell-content {
+  position: absolute;
+  inset: 0 12px;
+}
+.sia-table__tree-cell--lines {
+  height: 100%;
+}
+.sia-table__tree-guide {
+  position: relative;
+  align-self: stretch;
+  flex: 0 0 18px;
+  width: 18px;
+}
+.sia-table__tree-guide--branch::before,
+.sia-table__tree-guide--continued::before {
+  position: absolute;
+  content: "";
+  left: 10px;
+  top: 0;
+  height: 50%;
+  border-left: 1px solid var(--sia-color-border);
+}
+.sia-table__tree-guide--continued::before {
+  height: 100%;
+}
+.sia-table__tree-guide--branch::after {
+  position: absolute;
+  content: "";
+  left: 10px;
+  right: 0;
+  top: 50%;
+  border-top: 1px solid var(--sia-color-border);
+}
+.sia-table__tree-node {
+  position: relative;
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 20px;
+}
+.sia-table__tree-stem {
+  position: absolute;
+  left: 10px;
+  top: calc(50% + 10px);
+  bottom: 0;
+  border-left: 1px solid var(--sia-color-border);
+}
 .sia-table__tree-toggle,
 .sia-table__tree-placeholder {
   display: inline-grid;

package/dist/core.d.cts

@@ -1,4 +1,4 @@
-export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-DtGYdU61.cjs';
+export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-1iaQY0Is.cjs';
 export { f as Button, B as ButtonProps, e as ButtonSize, g as ButtonVariant, h as Modal, d as ModalActionResult, M as ModalOpenConfig, i as ModalProps, j as ModalType, a as OverlayApiHandle, k as Select, S as SelectOption, c as SelectProps, m as SelectValue } from './Select-YJbT-MF1.cjs';
 import 'react';
 import './shared-Bx4B28Wh.cjs';

package/dist/core.d.ts

@@ -1,4 +1,4 @@
-export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-DXJ4b0lT.js';
+export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-DoFob1fF.js';
 export { f as Button, B as ButtonProps, e as ButtonSize, g as ButtonVariant, h as Modal, d as ModalActionResult, M as ModalOpenConfig, i as ModalProps, j as ModalType, a as OverlayApiHandle, k as Select, S as SelectOption, c as SelectProps, m as SelectValue } from './Select-CCrPqULn.js';
 import 'react';
 import './shared-Bx4B28Wh.js';

package/dist/core.js

@@ -10,12 +10,12 @@ import {
   Typography,
   Upload,
   message
-} from "./chunk-MFR2FYQA.js";
+} from "./chunk-5OGT4AAS.js";
 import "./chunk-SMCYEPBL.js";
 import {
   Modal,
   Select
-} from "./chunk-PJT676UK.js";
+} from "./chunk-F4XMRO6G.js";
 import {
   Icon,
   Input,

package/dist/index.cjs

@@ -2639,6 +2639,11 @@ function Floating({
   const triggers = Array.isArray(trigger) ? trigger : [trigger];
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
   const [position, setPosition] = (0, import_react14.useState)();
+  const [portalContainer, setPortalContainer] = (0, import_react14.useState)(null);
+  (0, import_react14.useLayoutEffect)(() => {
+    if (!visible) return;
+    setPortalContainer(rootRef.current?.closest(".sia-modal-root, .sia-drawer-root") ?? document.body);
+  });
   const setVisibleRef = (0, import_react14.useRef)(setVisible);
   setVisibleRef.current = setVisible;
   const closeSelfRef = (0, import_react14.useRef)();
@@ -2701,6 +2706,8 @@ function Floating({
     update();
     window.addEventListener("resize", update);
     window.addEventListener("scroll", update, true);
+    window.addEventListener("animationend", update, true);
+    window.addEventListener("transitionend", update, true);
     const observer = new ResizeObserver(update);
     if (rootRef.current) observer.observe(rootRef.current);
     const anchor = getAnchor();
@@ -2709,9 +2716,11 @@ function Floating({
     return () => {
       window.removeEventListener("resize", update);
       window.removeEventListener("scroll", update, true);
+      window.removeEventListener("animationend", update, true);
+      window.removeEventListener("transitionend", update, true);
       observer.disconnect();
     };
-  }, [children, content, placement, visible, autoAdjustOverflow, typeof arrow === "object" && arrow.pointAtCenter]);
+  }, [children, content, placement, visible, portalContainer, autoAdjustOverflow, typeof arrow === "object" && arrow.pointAtCenter]);
   (0, import_react14.useEffect)(() => () => {
     clearTimers();
     if (activeTooltipClose === closeSelfRef.current) activeTooltipClose = void 0;
@@ -2766,7 +2775,7 @@ function Floating({
         ]
       }
     ),
-    document.body
+    portalContainer ?? document.body
   ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { ref: rootRef, className: `sia-floating ${className}`.trim(), children: child }),
@@ -13612,14 +13621,15 @@ function createTreePlugin(options = {}) {
     transformRows(rows, context) {
       if (options.ignoreChildrenColumn ?? true) return rows;
       const result = [];
-      const walk = (items, depth) => {
-        for (const row of items) {
+      const walk = (items, depth, guides) => {
+        for (const [rowIndex, row] of items.entries()) {
+          const hasNextSibling = rowIndex < items.length - 1;
           const children = row.record[childKey];
           const hasChildren = Array.isArray(children) && children.length > 0 && (options.canExpand?.(row.record) ?? true);
           result.push({
             ...row,
             depth,
-            meta: { ...row.meta, treeHasChildren: hasChildren }
+            meta: { ...row.meta, treeHasChildren: hasChildren, treeGuides: guides, treeHasNextSibling: hasNextSibling }
           });
           if (hasChildren && current(context).includes(row.key)) {
             walk(
@@ -13630,12 +13640,13 @@ function createTreePlugin(options = {}) {
                 depth: depth + 1,
                 meta: {}
               })),
-              depth + 1
+              depth + 1,
+              depth > 0 ? [...guides, hasNextSibling] : guides
             );
           }
         }
       };
-      walk(rows, 0);
+      walk(rows, 0, []);
       return result;
     },
     transformColumns(columns, context) {
@@ -13647,32 +13658,40 @@ function createTreePlugin(options = {}) {
         const previousRender = column.render;
         return {
           ...column,
+          ...options.showLine ? { ellipsis: false, meta: { ...column.meta, treeLines: true } } : {},
           render: (value, record, index, info) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
             "span",
             {
-              className: "sia-table__tree-cell",
-              style: { paddingLeft: info.row.depth * 18 },
+              className: `sia-table__tree-cell${options.showLine ? " sia-table__tree-cell--lines" : ""}`,
+              style: options.showLine ? void 0 : { paddingLeft: info.row.depth * 18 },
               children: [
-                info.row.meta.treeHasChildren ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    className: "sia-table__tree-toggle",
-                    "aria-label": current(context).includes(info.row.key) ? "\u6536\u8D77\u5B50\u8282\u70B9" : "\u5C55\u5F00\u5B50\u8282\u70B9",
-                    "aria-expanded": current(context).includes(info.row.key),
-                    onClick: (event) => {
-                      event.stopPropagation();
-                      toggle(info.row.key, context);
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                      Icon,
-                      {
-                        name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right",
-                        size: 13
-                      }
-                    )
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "sia-table__tree-placeholder" }),
+                options.showLine && info.row.depth > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+                  info.row.meta.treeGuides.map((continued, level) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "aria-hidden": "true", className: `sia-table__tree-guide${continued ? " sia-table__tree-guide--continued" : ""}` }, level)),
+                  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "aria-hidden": "true", className: `sia-table__tree-guide sia-table__tree-guide--branch${info.row.meta.treeHasNextSibling ? " sia-table__tree-guide--continued" : ""}` })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: options.showLine ? "sia-table__tree-node" : void 0, style: options.showLine ? void 0 : { display: "contents" }, children: [
+                  options.showLine && !!info.row.meta.treeHasChildren && current(context).includes(info.row.key) && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "aria-hidden": "true", className: "sia-table__tree-stem" }),
+                  info.row.meta.treeHasChildren ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "sia-table__tree-toggle",
+                      "aria-label": current(context).includes(info.row.key) ? "\u6536\u8D77\u5B50\u8282\u70B9" : "\u5C55\u5F00\u5B50\u8282\u70B9",
+                      "aria-expanded": current(context).includes(info.row.key),
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        toggle(info.row.key, context);
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                        Icon,
+                        {
+                          name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right",
+                          size: 13
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "sia-table__tree-placeholder" })
+                ] }),
                 previousRender ? previousRender(value, record, index, info) : value
               ]
             }
@@ -13680,6 +13699,9 @@ function createTreePlugin(options = {}) {
         };
       });
     },
+    getCellProps(_row, column) {
+      return column.meta?.treeLines ? { className: "sia-table__cell--tree-lines" } : void 0;
+    },
     getApi: (context) => ({
       getExpandedKeys: () => current(context),
       setExpandedKeys: (keys) => setKeys(keys, context),

package/dist/index.css

@@ -4176,6 +4176,56 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   align-items: center;
   min-width: 0;
 }
+.sia-table__cell--tree-lines {
+  padding-block: 0;
+}
+.sia-table__cell--tree-lines > .sia-table__cell-content {
+  position: absolute;
+  inset: 0 12px;
+}
+.sia-table__tree-cell--lines {
+  height: 100%;
+}
+.sia-table__tree-guide {
+  position: relative;
+  align-self: stretch;
+  flex: 0 0 18px;
+  width: 18px;
+}
+.sia-table__tree-guide--branch::before,
+.sia-table__tree-guide--continued::before {
+  position: absolute;
+  content: "";
+  left: 10px;
+  top: 0;
+  height: 50%;
+  border-left: 1px solid var(--sia-color-border);
+}
+.sia-table__tree-guide--continued::before {
+  height: 100%;
+}
+.sia-table__tree-guide--branch::after {
+  position: absolute;
+  content: "";
+  left: 10px;
+  right: 0;
+  top: 50%;
+  border-top: 1px solid var(--sia-color-border);
+}
+.sia-table__tree-node {
+  position: relative;
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 20px;
+}
+.sia-table__tree-stem {
+  position: absolute;
+  left: 10px;
+  top: calc(50% + 10px);
+  bottom: 0;
+  border-left: 1px solid var(--sia-color-border);
+}
 .sia-table__tree-toggle,
 .sia-table__tree-placeholder {
   display: inline-grid;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { T as TagStatus, B as BadgeProps } from './core-DtGYdU61.cjs';
-export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-DtGYdU61.cjs';
+import { T as TagStatus, B as BadgeProps } from './core-1iaQY0Is.cjs';
+export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-1iaQY0Is.cjs';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.cjs';
@@ -2587,6 +2587,8 @@ interface TableIndexPluginOptions {
 declare function createIndexPlugin<T extends Record<string, unknown>>(options?: TableIndexPluginOptions): TablePlugin<T, undefined>;
 /** TableTree的插件配置。 */
 interface TableTreePluginOptions<T> {
+    /** 显示树形层级连接线；仅在 ignoreChildrenColumn=false 时生效，默认 false。 */
+    showLine?: boolean;
     /** 行数据中存放子行的字段名。 */
     childrenColumnName?: string;
     /** 是否忽略数据内的子行字段。 */

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { T as TagStatus, B as BadgeProps } from './core-DXJ4b0lT.js';
-export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-DXJ4b0lT.js';
+import { T as TagStatus, B as BadgeProps } from './core-DoFob1fF.js';
+export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-DoFob1fF.js';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.js';
@@ -2587,6 +2587,8 @@ interface TableIndexPluginOptions {
 declare function createIndexPlugin<T extends Record<string, unknown>>(options?: TableIndexPluginOptions): TablePlugin<T, undefined>;
 /** TableTree的插件配置。 */
 interface TableTreePluginOptions<T> {
+    /** 显示树形层级连接线；仅在 ignoreChildrenColumn=false 时生效，默认 false。 */
+    showLine?: boolean;
     /** 行数据中存放子行的字段名。 */
     childrenColumnName?: string;
     /** 是否忽略数据内的子行字段。 */

package/dist/index.js

@@ -80,7 +80,7 @@ import {
   Watermark,
   message,
   notification
-} from "./chunk-MFR2FYQA.js";
+} from "./chunk-5OGT4AAS.js";
 import {
   TextArea
 } from "./chunk-SMCYEPBL.js";
@@ -95,7 +95,7 @@ import {
   DatePicker,
   SelectDateRange,
   TimePanel
-} from "./chunk-ZX2YNHQJ.js";
+} from "./chunk-7CAQPLKC.js";
 import {
   Checkbox,
   FloatingScrollbarProvider,
@@ -110,7 +110,7 @@ import {
   Tree,
   useOverlayLifecycle,
   useScrollbarProximity
-} from "./chunk-PJT676UK.js";
+} from "./chunk-F4XMRO6G.js";
 import {
   Dropdown,
   FILLED_ICON_NAMES,
@@ -6359,14 +6359,15 @@ function createTreePlugin(options = {}) {
     transformRows(rows, context) {
       if (options.ignoreChildrenColumn ?? true) return rows;
       const result = [];
-      const walk = (items, depth) => {
-        for (const row of items) {
+      const walk = (items, depth, guides) => {
+        for (const [rowIndex, row] of items.entries()) {
+          const hasNextSibling = rowIndex < items.length - 1;
           const children = row.record[childKey];
           const hasChildren = Array.isArray(children) && children.length > 0 && (options.canExpand?.(row.record) ?? true);
           result.push({
             ...row,
             depth,
-            meta: { ...row.meta, treeHasChildren: hasChildren }
+            meta: { ...row.meta, treeHasChildren: hasChildren, treeGuides: guides, treeHasNextSibling: hasNextSibling }
           });
           if (hasChildren && current(context).includes(row.key)) {
             walk(
@@ -6377,12 +6378,13 @@ function createTreePlugin(options = {}) {
                 depth: depth + 1,
                 meta: {}
               })),
-              depth + 1
+              depth + 1,
+              depth > 0 ? [...guides, hasNextSibling] : guides
             );
           }
         }
       };
-      walk(rows, 0);
+      walk(rows, 0, []);
       return result;
     },
     transformColumns(columns, context) {
@@ -6394,32 +6396,40 @@ function createTreePlugin(options = {}) {
         const previousRender = column.render;
         return {
           ...column,
+          ...options.showLine ? { ellipsis: false, meta: { ...column.meta, treeLines: true } } : {},
           render: (value, record, index, info) => /* @__PURE__ */ jsxs20(
             "span",
             {
-              className: "sia-table__tree-cell",
-              style: { paddingLeft: info.row.depth * 18 },
+              className: `sia-table__tree-cell${options.showLine ? " sia-table__tree-cell--lines" : ""}`,
+              style: options.showLine ? void 0 : { paddingLeft: info.row.depth * 18 },
               children: [
-                info.row.meta.treeHasChildren ? /* @__PURE__ */ jsx22(
-                  "button",
-                  {
-                    type: "button",
-                    className: "sia-table__tree-toggle",
-                    "aria-label": current(context).includes(info.row.key) ? "\u6536\u8D77\u5B50\u8282\u70B9" : "\u5C55\u5F00\u5B50\u8282\u70B9",
-                    "aria-expanded": current(context).includes(info.row.key),
-                    onClick: (event) => {
-                      event.stopPropagation();
-                      toggle(info.row.key, context);
-                    },
-                    children: /* @__PURE__ */ jsx22(
-                      Icon,
-                      {
-                        name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right",
-                        size: 13
-                      }
-                    )
-                  }
-                ) : /* @__PURE__ */ jsx22("span", { className: "sia-table__tree-placeholder" }),
+                options.showLine && info.row.depth > 0 && /* @__PURE__ */ jsxs20(Fragment7, { children: [
+                  info.row.meta.treeGuides.map((continued, level) => /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: `sia-table__tree-guide${continued ? " sia-table__tree-guide--continued" : ""}` }, level)),
+                  /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: `sia-table__tree-guide sia-table__tree-guide--branch${info.row.meta.treeHasNextSibling ? " sia-table__tree-guide--continued" : ""}` })
+                ] }),
+                /* @__PURE__ */ jsxs20("span", { className: options.showLine ? "sia-table__tree-node" : void 0, style: options.showLine ? void 0 : { display: "contents" }, children: [
+                  options.showLine && !!info.row.meta.treeHasChildren && current(context).includes(info.row.key) && /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: "sia-table__tree-stem" }),
+                  info.row.meta.treeHasChildren ? /* @__PURE__ */ jsx22(
+                    "button",
+                    {
+                      type: "button",
+                      className: "sia-table__tree-toggle",
+                      "aria-label": current(context).includes(info.row.key) ? "\u6536\u8D77\u5B50\u8282\u70B9" : "\u5C55\u5F00\u5B50\u8282\u70B9",
+                      "aria-expanded": current(context).includes(info.row.key),
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        toggle(info.row.key, context);
+                      },
+                      children: /* @__PURE__ */ jsx22(
+                        Icon,
+                        {
+                          name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right",
+                          size: 13
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx22("span", { className: "sia-table__tree-placeholder" })
+                ] }),
                 previousRender ? previousRender(value, record, index, info) : value
               ]
             }
@@ -6427,6 +6437,9 @@ function createTreePlugin(options = {}) {
         };
       });
     },
+    getCellProps(_row, column) {
+      return column.meta?.treeLines ? { className: "sia-table__cell--tree-lines" } : void 0;
+    },
     getApi: (context) => ({
       getExpandedKeys: () => current(context),
       setExpandedKeys: (keys) => setKeys(keys, context),

package/dist/select-date-range.cjs

@@ -3010,6 +3010,11 @@ function Floating({
   const triggers = Array.isArray(trigger) ? trigger : [trigger];
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
   const [position, setPosition] = (0, import_react13.useState)();
+  const [portalContainer, setPortalContainer] = (0, import_react13.useState)(null);
+  (0, import_react13.useLayoutEffect)(() => {
+    if (!visible) return;
+    setPortalContainer(rootRef.current?.closest(".sia-modal-root, .sia-drawer-root") ?? document.body);
+  });
   const setVisibleRef = (0, import_react13.useRef)(setVisible);
   setVisibleRef.current = setVisible;
   const closeSelfRef = (0, import_react13.useRef)();
@@ -3072,6 +3077,8 @@ function Floating({
     update();
     window.addEventListener("resize", update);
     window.addEventListener("scroll", update, true);
+    window.addEventListener("animationend", update, true);
+    window.addEventListener("transitionend", update, true);
     const observer = new ResizeObserver(update);
     if (rootRef.current) observer.observe(rootRef.current);
     const anchor = getAnchor();
@@ -3080,9 +3087,11 @@ function Floating({
     return () => {
       window.removeEventListener("resize", update);
       window.removeEventListener("scroll", update, true);
+      window.removeEventListener("animationend", update, true);
+      window.removeEventListener("transitionend", update, true);
       observer.disconnect();
     };
-  }, [children, content, placement, visible, autoAdjustOverflow, typeof arrow === "object" && arrow.pointAtCenter]);
+  }, [children, content, placement, visible, portalContainer, autoAdjustOverflow, typeof arrow === "object" && arrow.pointAtCenter]);
   (0, import_react13.useEffect)(() => () => {
     clearTimers();
     if (activeTooltipClose === closeSelfRef.current) activeTooltipClose = void 0;
@@ -3137,7 +3146,7 @@ function Floating({
         ]
       }
     ),
-    document.body
+    portalContainer ?? document.body
   ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { ref: rootRef, className: `sia-floating ${className}`.trim(), children: child }),

package/dist/select-date-range.js

@@ -1,7 +1,7 @@
 import {
   SelectDateRange
-} from "./chunk-ZX2YNHQJ.js";
-import "./chunk-PJT676UK.js";
+} from "./chunk-7CAQPLKC.js";
+import "./chunk-F4XMRO6G.js";
 import "./chunk-IUZ2RSI5.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.53",
+  "version": "0.1.55",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",