@sia.soul/sia-react-ui 0.1.39 → 0.1.40

package/dist/{chunk-GLS4WVIZ.js → chunk-6TLANQVX.js}

@@ -1,7 +1,7 @@
 import {
   FloatingScrollbarProvider,
   Select
-} from "./chunk-LRGD2QDA.js";
+} from "./chunk-ZTJUFVJO.js";
 import {
   Icon
 } from "./chunk-XCVAVCIO.js";

package/dist/{chunk-WR7XTQRU.js → chunk-CEZ4GW3X.js}

@@ -2,11 +2,10 @@ import {
   TextArea
 } from "./chunk-SMCYEPBL.js";
 import {
-  FloatingScrollbarProvider,
   Popover,
   Tooltip,
   useOverlayLifecycle
-} from "./chunk-LRGD2QDA.js";
+} from "./chunk-ZTJUFVJO.js";
 import {
   Dropdown,
   Icon
@@ -191,6 +190,7 @@ function Tag({
 // src/components/Tabs.tsx
 import { useEffect, useId, useLayoutEffect as useLayoutEffect2, useMemo, useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { createElement } from "react";
 function Tabs({
   items,
   activeKey,
@@ -225,6 +225,42 @@ function Tabs({
   const sliding = ["capsule", "line", "underline", "tech", "tech-line"].includes(type);
   const listRef = useRef2(null);
   const indicatorRef = useRef2(null);
+  const moreRef = useRef2(null);
+  const [overflow, setOverflow] = useState3({ count: items.length, width: 0 });
+  const [moreOpen, setMoreOpen] = useState3(false);
+  const visibleCount = resolvedOrientation === "horizontal" ? overflow.count : items.length;
+  const hiddenItems = items.slice(visibleCount);
+  useLayoutEffect2(() => {
+    const list = listRef.current;
+    if (!list || resolvedOrientation !== "horizontal") return;
+    const entries = Array.from(list.children).filter((node) => node instanceof HTMLElement && node.hasAttribute("data-tab-entry"));
+    const measure = () => {
+      const css = getComputedStyle(list);
+      const gap = parseFloat(css.columnGap) || 0;
+      const padding = (parseFloat(css.paddingLeft) || 0) + (parseFloat(css.paddingRight) || 0);
+      const widths = entries.map((node) => node.getBoundingClientRect().width);
+      const total = widths.reduce((sum, width2) => sum + width2, 0) + gap * Math.max(0, widths.length - 1);
+      const available = Math.max(0, list.clientWidth - padding);
+      let count = widths.length;
+      if (total > available + 0.5) {
+        const moreWidth = moreRef.current?.getBoundingClientRect().width ?? 36;
+        let used = moreWidth;
+        count = 0;
+        for (const width2 of widths) {
+          if (used + gap + width2 > available + 0.5) break;
+          used += gap + width2;
+          count++;
+        }
+      }
+      const width = Math.ceil(total + padding + (parseFloat(css.borderLeftWidth) || 0) + (parseFloat(css.borderRightWidth) || 0));
+      setOverflow((previous) => previous.count === count && previous.width === width ? previous : { count, width });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(list);
+    entries.forEach((entry) => observer.observe(entry));
+    return () => observer.disconnect();
+  }, [items, type, size, closable, resolvedOrientation, tabBarTitle, tabBarExtraContent]);
   const [contentState, setContentState] = useState3(() => ({ key: selectedKey, visited: /* @__PURE__ */ new Set([selectedKey]) }));
   const settledKeyRef = useRef2(selectedKey);
   const afterChangeRef = useRef2(onAfterChange);
@@ -239,16 +275,12 @@ function Tabs({
     function updateIndicator() {
       if (!list || !indicator) return;
       const active = list.querySelector('[role="tab"][aria-selected="true"]');
-      if (!active) {
+      if (!active || active.closest('[data-tab-hidden="true"]')) {
         indicator.style.visibility = "hidden";
         return;
       }
       const listRect = list.getBoundingClientRect();
       const rect = active.getBoundingClientRect();
-      if (type === "tech-line" && resolvedOrientation === "horizontal") {
-        if (rect.left < listRect.left) list.scrollLeft += rect.left - listRect.left;
-        else if (rect.right > listRect.right) list.scrollLeft += rect.right - listRect.right;
-      }
       const currentRect = active.getBoundingClientRect();
       indicator.style.transform = `translate(${currentRect.left - listRect.left - list.clientLeft + list.scrollLeft}px, ${currentRect.top - listRect.top - list.clientTop + list.scrollTop}px)`;
       indicator.style.width = `${rect.width}px`;
@@ -264,7 +296,7 @@ function Tabs({
     observer.observe(list);
     list.querySelectorAll('[role="tab"]').forEach((tab) => observer.observe(tab));
     return () => observer.disconnect();
-  }, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable]);
+  }, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable, visibleCount]);
   useEffect(() => {
     let cancelled = false;
     let frame = 0;
@@ -298,7 +330,8 @@ function Tabs({
   }
   function focusAndSelect(key) {
     selectTab(key);
-    document.getElementById(`${baseId}-tab-${key}`)?.focus();
+    if (items.findIndex((item) => item.key === key) >= visibleCount) moreRef.current?.focus();
+    else document.getElementById(`${baseId}-tab-${key}`)?.focus();
   }
   function handleKeyDown(event, key) {
     const previousKey = resolvedOrientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
@@ -320,54 +353,53 @@ function Tabs({
       ...withTitleTooltip(props),
       children: [
         /* @__PURE__ */ jsxs4("div", { className: "sia-tabs__header", children: [
-          /* @__PURE__ */ jsx4(FloatingScrollbarProvider, { targetRef: listRef, disabled: type !== "tech-line" || resolvedOrientation !== "horizontal" }),
           tabBarTitle ? /* @__PURE__ */ jsxs4("div", { className: "sia-tabs__title", children: [
             tabBarTitle,
             type === "tech-line" ? /* @__PURE__ */ jsx4("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("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__ */ jsxs4("div", { ref: listRef, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
+          /* @__PURE__ */ jsxs4("div", { ref: listRef, style: resolvedOrientation === "horizontal" && overflow.width ? { width: overflow.width } : void 0, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
             sliding ? /* @__PURE__ */ jsx4("span", { ref: indicatorRef, className: `sia-tabs__indicator${type === "capsule" ? " sia-tabs__capsule-indicator" : ""}`, "aria-hidden": "true", children: type === "tech-line" ? /* @__PURE__ */ jsx4("span", { className: "sia-tabs__indicator-shape", "aria-hidden": "true" }) : null }, type) : null,
-            items.map((item) => {
+            items.map((item, index) => {
               const selected = item.key === selectedKey;
               const canClose = item.closable ?? closable;
-              const tabNode = /* @__PURE__ */ jsxs4("span", { className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, children: [
-                /* @__PURE__ */ jsxs4(
-                  "button",
-                  {
-                    id: `${baseId}-tab-${item.key}`,
-                    type: "button",
-                    className: "sia-tabs__tab",
-                    role: "tab",
-                    "aria-selected": selected,
-                    "aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
-                    tabIndex: selected ? 0 : -1,
-                    disabled: item.disabled,
-                    onClick: () => selectTab(item.key),
-                    onKeyDown: (event) => handleKeyDown(event, item.key),
-                    children: [
-                      type === "tech-line" ? /* @__PURE__ */ jsx4("span", { className: "sia-tabs__tab-shape", "aria-hidden": "true" }) : null,
-                      item.icon ? /* @__PURE__ */ jsx4("span", { className: "sia-tabs__icon", children: item.icon }) : null,
-                      /* @__PURE__ */ jsx4("span", { children: item.label })
-                    ]
-                  }
-                ),
-                canClose ? /* @__PURE__ */ jsx4(
-                  "button",
-                  {
-                    type: "button",
-                    className: "sia-tabs__close",
-                    "aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
-                    disabled: item.disabled,
-                    onClick: () => onEdit?.(item.key, "remove"),
-                    children: /* @__PURE__ */ jsx4(Icon, { name: "close", size: 12 })
-                  }
-                ) : null
-              ] }, item.key);
               const contextMenuItems = typeof tabContextMenu === "function" ? tabContextMenu(item) : tabContextMenu;
+              const entryProps = { "data-tab-entry": "", "data-tab-hidden": index >= visibleCount, "aria-hidden": index >= visibleCount || void 0 };
+              const tabNode = /* @__PURE__ */ createElement("span", { ...!contextMenuItems?.length ? entryProps : {}, className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, key: item.key }, /* @__PURE__ */ jsxs4(
+                "button",
+                {
+                  id: `${baseId}-tab-${item.key}`,
+                  type: "button",
+                  className: "sia-tabs__tab",
+                  role: "tab",
+                  "aria-selected": selected,
+                  "aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
+                  tabIndex: selected ? 0 : -1,
+                  disabled: item.disabled,
+                  onClick: () => selectTab(item.key),
+                  onKeyDown: (event) => handleKeyDown(event, item.key),
+                  children: [
+                    type === "tech-line" ? /* @__PURE__ */ jsx4("span", { className: "sia-tabs__tab-shape", "aria-hidden": "true" }) : null,
+                    item.icon ? /* @__PURE__ */ jsx4("span", { className: "sia-tabs__icon", children: item.icon }) : null,
+                    /* @__PURE__ */ jsx4("span", { children: item.label })
+                  ]
+                }
+              ), canClose ? /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: "sia-tabs__close",
+                  "aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
+                  disabled: item.disabled,
+                  onClick: () => onEdit?.(item.key, "remove"),
+                  children: /* @__PURE__ */ jsx4(Icon, { name: "close", size: 12 })
+                }
+              ) : null);
               if (!contextMenuItems?.length) return tabNode;
-              return /* @__PURE__ */ jsx4(
+              return /* @__PURE__ */ createElement(
                 Dropdown,
                 {
+                  ...entryProps,
+                  key: item.key,
                   className: "sia-tabs__tab-context-trigger",
                   popupClassName: "sia-tabs__tab-context-menu",
                   trigger: ["contextMenu"],
@@ -376,12 +408,26 @@ function Tabs({
                     items: contextMenuItems,
                     selectable: false,
                     onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
-                  },
-                  children: tabNode
+                  }
                 },
-                item.key
+                tabNode
               );
-            })
+            }),
+            resolvedOrientation === "horizontal" ? /* @__PURE__ */ jsx4(
+              Dropdown,
+              {
+                className: "sia-tabs__more",
+                "data-tab-hidden": !hiddenItems.length,
+                trigger: ["hover", "click"],
+                placement: "bottomRight",
+                showTriggerIcon: false,
+                autoFocus: true,
+                open: moreOpen && hiddenItems.length > 0,
+                onOpenChange: setMoreOpen,
+                menu: { items: hiddenItems.map((item) => ({ key: item.key, label: item.label, icon: item.icon, disabled: item.disabled })), selectedKeys: [selectedKey], onClick: (info) => selectTab(info.key) },
+                children: /* @__PURE__ */ jsx4(Button, { ref: moreRef, variant: "text", icon: /* @__PURE__ */ jsx4(Icon, { name: "more-horizontal" }), "aria-label": "\u66F4\u591A\u9009\u9879\u5361", onKeyDown: (event) => handleKeyDown(event, selectedKey), className: hiddenItems.some((item) => item.key === selectedKey) ? "is-active" : void 0 })
+              }
+            ) : null
           ] }),
           tabBarExtraContent ? /* @__PURE__ */ jsx4("div", { className: "sia-tabs__extra", children: tabBarExtraContent }) : null
         ] }),