@sia.soul/sia-react-ui 0.1.32 → 0.1.34

package/dist/core.cjs

@@ -175,6 +175,7 @@ function installTitleTooltips(doc) {
   documents.add(doc);
   let hovered = null;
   let focused = null;
+  let keyboardFocus = true;
   let active = null;
   let pending = null;
   let timer;
@@ -265,19 +266,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();
@@ -1815,6 +1827,8 @@ function Tabs({
   activeKey,
   defaultActiveKey,
   onChange,
+  onAfterChange,
+  deferContent = false,
   type = "line",
   size = "medium",
   tabPosition,
@@ -1822,6 +1836,7 @@ function Tabs({
   centered = false,
   tabBarTitle,
   tabBarExtraContent,
+  contentGap,
   destroyInactiveTabPane = true,
   closable = false,
   onEdit,
@@ -1841,6 +1856,12 @@ function Tabs({
   const sliding = ["capsule", "line", "underline", "tech", "tech-line"].includes(type);
   const listRef = (0, import_react10.useRef)(null);
   const indicatorRef = (0, import_react10.useRef)(null);
+  const [contentState, setContentState] = (0, import_react10.useState)(() => ({ key: selectedKey, visited: /* @__PURE__ */ new Set([selectedKey]) }));
+  const settledKeyRef = (0, import_react10.useRef)(selectedKey);
+  const afterChangeRef = (0, import_react10.useRef)(onAfterChange);
+  (0, import_react10.useLayoutEffect)(() => {
+    afterChangeRef.current = onAfterChange;
+  }, [onAfterChange]);
   (0, import_react10.useLayoutEffect)(() => {
     if (!sliding) return;
     const list = listRef.current;
@@ -1870,6 +1891,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_react10.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);
@@ -1901,26 +1948,10 @@ function Tabs({
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "sia-tabs__header", children: [
           tabBarTitle ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "sia-tabs__title", children: [
             tabBarTitle,
-            type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsxs)("div", { ref: listRef, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
-            sliding ? /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsxs)("svg", { className: "sia-tabs__indicator-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("linearGradient", { id: `${baseId}-tab-fill-indicator`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.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_runtime11.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;
@@ -1939,23 +1970,7 @@ function Tabs({
                     onClick: () => selectTab(item.key),
                     onKeyDown: (event) => handleKeyDown(event, item.key),
                     children: [
-                      type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { className: "sia-tabs__tab-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("linearGradient", { id: `${baseId}-tab-fill-${item.key}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
-                        ] }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("span", { className: "sia-tabs__tab-shape", "aria-hidden": "true" }) : null,
                       item.icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sia-tabs__icon", children: item.icon }) : null,
                       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: item.label })
                     ]
@@ -1995,9 +2010,13 @@ function Tabs({
           ] }),
           tabBarExtraContent ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "sia-tabs__extra", children: tabBarExtraContent }) : null
         ] }),
-        hasPanels ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "sia-tabs__panels", children: items.map((item) => {
-          const selected = item.key === selectedKey;
+        hasPanels ? /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(
             "div",
             {