@sia.soul/sia-react-ui 0.1.31 → 0.1.33

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-DwsFTbqh.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-CzO_tc34.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-C89ubkwU.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-CIXKpA9Z.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,21 +10,21 @@ import {
   Typography,
   Upload,
   message
-} from "./chunk-NDJSNM54.js";
-import "./chunk-YQDHCORW.js";
+} from "./chunk-Z63VYNCR.js";
+import "./chunk-SMCYEPBL.js";
 import {
   Modal,
   Select
-} from "./chunk-AHBC5UXJ.js";
+} from "./chunk-QAVQEBIS.js";
 import {
   Icon,
   Input,
   Segmented
-} from "./chunk-YF2I6SDB.js";
+} from "./chunk-HOU5JLNJ.js";
 import {
   Button
-} from "./chunk-IYNS423D.js";
-import "./chunk-RAO3JHDL.js";
+} from "./chunk-IKAMZNCK.js";
+import "./chunk-H7IAG72O.js";
 export {
   Breadcrumb,
   Button,

package/dist/index.cjs

@@ -323,6 +323,7 @@ function installTitleTooltips(doc) {
   documents.add(doc);
   let hovered = null;
   let focused = null;
+  let keyboardFocus = true;
   let active = null;
   let pending = null;
   let timer;
@@ -413,19 +414,30 @@ function installTitleTooltips(doc) {
     else show(hovered ?? focused);
   }, true);
   doc.addEventListener("focusin", (event) => {
-    focused = candidate(event.target);
+    focused = keyboardFocus ? candidate(event.target) : null;
     if (hasExplicitTooltip(event.target)) hide();
-    else show(focused ?? hovered);
+    else if (keyboardFocus) show(focused ?? hovered);
   }, true);
   doc.addEventListener("focusout", (event) => {
-    focused = candidate(event.relatedTarget);
+    focused = keyboardFocus ? candidate(event.relatedTarget) : null;
     show(hovered ?? focused);
   }, true);
-  doc.addEventListener("pointerdown", hide, true);
+  doc.addEventListener("pointerdown", () => {
+    keyboardFocus = false;
+    focused = null;
+    hide();
+  }, true);
   doc.addEventListener("keydown", (event) => {
     if (event.key === "Escape") hide();
+    else if (event.key === "Tab") keyboardFocus = true;
   }, true);
   doc.addEventListener("scroll", hide, true);
+  doc.addEventListener("visibilitychange", () => {
+    if (doc.hidden) {
+      hovered = focused = null;
+      hide();
+    }
+  });
   doc.defaultView?.addEventListener("blur", () => {
     hovered = focused = null;
     hide();
@@ -10826,6 +10838,8 @@ function Tabs({
   activeKey,
   defaultActiveKey,
   onChange,
+  onAfterChange,
+  deferContent = false,
   type = "line",
   size = "medium",
   tabPosition,
@@ -10833,6 +10847,7 @@ function Tabs({
   centered = false,
   tabBarTitle,
   tabBarExtraContent,
+  contentGap,
   destroyInactiveTabPane = true,
   closable = false,
   onEdit,
@@ -10852,6 +10867,12 @@ function Tabs({
   const sliding = ["capsule", "line", "underline", "tech", "tech-line"].includes(type);
   const listRef = (0, import_react45.useRef)(null);
   const indicatorRef = (0, import_react45.useRef)(null);
+  const [contentState, setContentState] = (0, import_react45.useState)(() => ({ key: selectedKey, visited: /* @__PURE__ */ new Set([selectedKey]) }));
+  const settledKeyRef = (0, import_react45.useRef)(selectedKey);
+  const afterChangeRef = (0, import_react45.useRef)(onAfterChange);
+  (0, import_react45.useLayoutEffect)(() => {
+    afterChangeRef.current = onAfterChange;
+  }, [onAfterChange]);
   (0, import_react45.useLayoutEffect)(() => {
     if (!sliding) return;
     const list = listRef.current;
@@ -10881,6 +10902,32 @@ function Tabs({
     list.querySelectorAll('[role="tab"]').forEach((tab) => observer.observe(tab));
     return () => observer.disconnect();
   }, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable]);
+  (0, import_react45.useEffect)(() => {
+    let cancelled = false;
+    let frame = 0;
+    frame = requestAnimationFrame(() => {
+      const indicator = indicatorRef.current;
+      if (indicator) getComputedStyle(indicator).transform;
+      const animations = indicator?.getAnimations() ?? [];
+      const complete = () => {
+        if (cancelled) return;
+        setContentState((previous) => ({ key: selectedKey, visited: new Set([...previous.visited].filter((key) => items.some((item) => item.key === key))).add(selectedKey) }));
+        if (settledKeyRef.current !== selectedKey) {
+          settledKeyRef.current = selectedKey;
+          afterChangeRef.current?.(selectedKey);
+        }
+      };
+      if (!animations.length) complete();
+      else Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
+        if (!cancelled) frame = requestAnimationFrame(complete);
+      });
+    });
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(frame);
+    };
+  }, [selectedKey, type, deferContent]);
+  const contentKey = deferContent ? contentState.key : selectedKey;
   function selectTab(key) {
     if (key === selectedKey) return;
     if (activeKey === void 0) setInternalActiveKey(key);
@@ -10912,26 +10959,10 @@ function Tabs({
         /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "sia-tabs__header", children: [
           tabBarTitle ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "sia-tabs__title", children: [
             tabBarTitle,
-            type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M0 39 H5 Q8 39 10 35 L28 3 Q29 1 32 1", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }) : null
+            type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M0 39.25 H5 Q8 39.25 10 35.25 L28 3.75 Q29 1.75 32 1.75", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }) : null
           ] }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { ref: listRef, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
-            sliding ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ref: indicatorRef, className: `sia-tabs__indicator${type === "capsule" ? " sia-tabs__capsule-indicator" : ""}`, "aria-hidden": "true", children: type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("svg", { className: "sia-tabs__indicator-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("linearGradient", { id: `${baseId}-tab-fill-indicator`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                "path",
-                {
-                  d: "M19 1 H96 Q99 1 97.5 4 L83.5 30 Q82 33 79 33 H4 Q1 33 2.5 30 L16.5 4 Q18 1 19 1 Z",
-                  fill: `url(#${baseId}-tab-fill-indicator)`,
-                  stroke: "currentColor",
-                  strokeWidth: "1.5",
-                  vectorEffect: "non-scaling-stroke"
-                }
-              )
-            ] }) : null }, type) : null,
+            sliding ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ref: indicatorRef, className: `sia-tabs__indicator${type === "capsule" ? " sia-tabs__capsule-indicator" : ""}`, "aria-hidden": "true", children: type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-tabs__indicator-shape", "aria-hidden": "true" }) : null }, type) : null,
             items.map((item) => {
               const selected = item.key === selectedKey;
               const canClose = item.closable ?? closable;
@@ -10950,23 +10981,7 @@ function Tabs({
                     onClick: () => selectTab(item.key),
                     onKeyDown: (event) => handleKeyDown(event, item.key),
                     children: [
-                      type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("svg", { className: "sia-tabs__tab-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("linearGradient", { id: `${baseId}-tab-fill-${item.key}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
-                        ] }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                          "path",
-                          {
-                            d: "M19 1 H96 Q99 1 97.5 4 L83.5 30 Q82 33 79 33 H4 Q1 33 2.5 30 L16.5 4 Q18 1 19 1 Z",
-                            fill: `url(#${baseId}-tab-fill-${item.key})`,
-                            stroke: "currentColor",
-                            strokeWidth: "1.5",
-                            vectorEffect: "non-scaling-stroke"
-                          }
-                        )
-                      ] }) : null,
+                      type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-tabs__tab-shape", "aria-hidden": "true" }) : null,
                       item.icon ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-tabs__icon", children: item.icon }) : null,
                       /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: item.label })
                     ]
@@ -11006,9 +11021,13 @@ function Tabs({
           ] }),
           tabBarExtraContent ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sia-tabs__extra", children: tabBarExtraContent }) : null
         ] }),
-        hasPanels ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sia-tabs__panels", children: items.map((item) => {
-          const selected = item.key === selectedKey;
+        hasPanels ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sia-tabs__panels", style: contentGap === void 0 ? void 0 : {
+          // 仅设置面板靠近导航的一侧，保留各方向布局原有的其余边界。
+          [resolvedPosition === "top" ? "paddingTop" : resolvedPosition === "bottom" ? "paddingBottom" : resolvedPosition === "left" ? "paddingLeft" : "paddingRight"]: contentGap
+        }, "aria-busy": deferContent && contentKey !== selectedKey || void 0, children: items.map((item) => {
+          const selected = item.key === contentKey;
           if (destroyInactiveTabPane && !selected) return null;
+          if (deferContent && !selected && !contentState.visited.has(item.key)) return null;
           return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "div",
             {