@sia.soul/sia-react-ui 0.1.24 → 0.1.26

package/dist/core.cjs

@@ -245,7 +245,7 @@ function installTitleTooltips(doc) {
         else if (active.getAttribute("data-sia-title") !== doc.getElementById(tooltipId)?.textContent) render();
       });
       observer.observe(doc.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-sia-title"] });
-    }, 250);
+    }, 600);
   };
   doc.addEventListener("pointerover", (event) => {
     if (event.pointerType === "touch") return;
@@ -2742,7 +2742,7 @@ var Input = (0, import_react17.forwardRef)(function Input2({
   size: sizeProp,
   prefix,
   suffix,
-  allowClear = false,
+  allowClear = true,
   onClear,
   showCount = false,
   placeholderMode,
@@ -2837,252 +2837,17 @@ var Input = (0, import_react17.forwardRef)(function Input2({
 });
 
 // src/components/SelectionPanel.tsx
-var import_react18 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-function SelectionPanel({
-  options,
-  value,
-  onChange,
-  multiple = false,
-  allowDeselect = false,
-  disabled = false,
-  loading = false,
-  showSearch = true,
-  showActions = true,
-  includeUnknownValues = true,
-  searchValue,
-  onSearch,
-  selectedOnly = false,
-  showValue = false,
-  displayField = "label",
-  columns = 1,
-  maxHeight = 250,
-  autoFocusSearch = false
-}) {
-  const [localSearch, setLocalSearch] = (0, import_react18.useState)("");
-  const search = searchValue ?? localSearch;
-  const [scrollTop, setScrollTop] = (0, import_react18.useState)(0);
-  const [active, setActive] = (0, import_react18.useState)();
-  const [keyboardActive, setKeyboardActive] = (0, import_react18.useState)(false);
-  const [deselectedHover, setDeselectedHover] = (0, import_react18.useState)();
-  const listRef = (0, import_react18.useRef)(null);
-  const id = (0, import_react18.useId)();
-  const selected = (0, import_react18.useMemo)(() => new Set(value), [value]);
-  const count = Math.max(1, Math.floor(columns));
-  const allOptions = (0, import_react18.useMemo)(() => {
-    if (!includeUnknownValues) return [...options];
-    const known = new Set(options.filter((option) => option.optionType !== "divider").map((option) => option.value));
-    return [...value.filter((item) => !known.has(item)).map((item) => ({ value: item, label: String(item), group: "\u81EA\u5B9A\u4E49\u503C" })), ...options];
-  }, [options, value, includeUnknownValues]);
-  const filtered = (0, import_react18.useMemo)(
-    () => allOptions.filter((option) => (!selectedOnly || selected.has(option.value)) && (!search || option.optionType !== "divider" && [option.label, option.value].some((text) => String(text ?? "").toLowerCase().includes(search.toLowerCase())))),
-    [allOptions, selectedOnly, selected, search]
-  );
-  const rows = (0, import_react18.useMemo)(() => {
-    const groups = /* @__PURE__ */ new Map();
-    filtered.forEach((option) => {
-      const items = groups.get(option.group) ?? [];
-      items.push(option);
-      groups.set(option.group, items);
-    });
-    const rows2 = [];
-    let top = 0;
-    for (const [group, items] of groups) {
-      if (group) {
-        rows2.push({ key: `group-${rows2.length}`, title: group, top, height: 30 });
-        top += 30;
-      }
-      for (let index = 0; index < items.length; index += count) {
-        const height = showValue ? 48 : 34;
-        rows2.push({ key: `row-${rows2.length}`, items: items.slice(index, index + count), top, height });
-        top += height;
-      }
-    }
-    return rows2;
-  }, [filtered, count, showValue]);
-  const totalHeight = rows.length ? rows[rows.length - 1].top + rows[rows.length - 1].height : 0;
-  const virtual = filtered.length > 100;
-  const renderedRows = virtual ? rows.filter((row) => row.top + row.height >= scrollTop - 100 && row.top <= scrollTop + maxHeight + 100) : rows;
-  const enabled = filtered.filter((option) => !option.disabled && option.optionType !== "divider");
-  (0, import_react18.useEffect)(() => {
-    setScrollTop(0);
-    if (listRef.current) listRef.current.scrollTop = 0;
-    setActive(void 0);
-  }, [search, selectedOnly, count]);
-  function toggle(option, keyboard = false) {
-    if (disabled || loading || option.disabled || option.optionType === "divider") return;
-    setActive(option.value);
-    setKeyboardActive(keyboard);
-    setDeselectedHover(!keyboard && !multiple && allowDeselect && selected.has(option.value) ? option.value : void 0);
-    onChange(multiple ? selected.has(option.value) ? value.filter((item) => item !== option.value) : [...value, option.value] : allowDeselect && selected.has(option.value) ? [] : [option.value]);
-  }
-  function batch(operation) {
-    if (disabled || loading) return;
-    if (operation === "clear") {
-      onChange([]);
-      return;
-    }
-    const editable = new Set(enabled.map((option) => option.value));
-    const retained = value.filter((item) => !editable.has(item));
-    const add = enabled.filter((option) => operation === "all" || !selected.has(option.value)).map((option) => option.value);
-    onChange([...retained, ...add]);
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "sia-selection-panel", children: [
-    showSearch && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      Input,
-      {
-        "aria-label": "\u641C\u7D22\u9009\u9879",
-        placeholder: "\u641C\u7D22",
-        autoFocus: autoFocusSearch,
-        value: search,
-        allowClear: true,
-        onChange: (event) => {
-          setLocalSearch(event.target.value);
-          onSearch?.(event.target.value);
-        }
-      }
-    ),
-    multiple && showActions && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "sia-selection-panel__actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("all"), children: "\u5168\u9009" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("invert"), children: "\u53CD\u9009" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !value.length, onClick: () => batch("clear"), children: "\u6E05\u7A7A" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
-        "\u5DF2\u9009 ",
-        value.length,
-        " \u9879"
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      "div",
-      {
-        ref: listRef,
-        role: "listbox",
-        "aria-label": "\u9009\u9879\u5217\u8868",
-        "aria-multiselectable": multiple || void 0,
-        tabIndex: disabled ? -1 : 0,
-        className: "sia-selection-panel__list",
-        style: { maxHeight },
-        onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
-        onPointerDown: () => setKeyboardActive(false),
-        onBlur: (event) => {
-          if (!event.currentTarget.contains(event.relatedTarget)) setKeyboardActive(false);
-        },
-        "aria-activedescendant": active !== void 0 ? `${id}-${typeof active}-${active}` : void 0,
-        onKeyDown: (event) => {
-          if (event.target instanceof HTMLInputElement) return;
-          if (disabled || loading || !enabled.length) return;
-          const index = enabled.findIndex((option) => option.value === active);
-          if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
-            event.preventDefault();
-            setKeyboardActive(true);
-            setDeselectedHover(void 0);
-            const next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : Math.max(0, Math.min(enabled.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
-            const option = enabled[next];
-            setActive(option.value);
-            const row = rows.find((row2) => row2.items?.includes(option));
-            if (row && listRef.current) {
-              listRef.current.scrollTop = Math.max(0, row.top - maxHeight / 2);
-              setScrollTop(listRef.current.scrollTop);
-            }
-          } else if ((event.key === "Enter" || event.key === " ") && index >= 0) {
-            event.preventDefault();
-            toggle(enabled[index], true);
-          }
-        },
-        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          "div",
-          {
-            className: row.title !== void 0 ? "sia-selection-panel__group" : "sia-selection-panel__row",
-            style: { position: "absolute", top: row.top, height: row.height, width: "100%", gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` },
-            children: row.title ?? row.items?.map((option, index) => option.optionType === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { role: "separator", className: "sia-selection-panel__divider" }, `divider-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip, { title: option.disabled ? option.disabledTip : void 0, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              "div",
-              {
-                role: "option",
-                id: `${id}-${typeof option.value}-${option.value}`,
-                tabIndex: -1,
-                "aria-selected": selected.has(option.value),
-                "aria-disabled": disabled || option.disabled || void 0,
-                className: `sia-selection-panel__option${keyboardActive && active === option.value ? " is-active" : ""}`,
-                "data-deselected-hover": deselectedHover === option.value || void 0,
-                onPointerLeave: () => {
-                  if (deselectedHover === option.value) setDeselectedHover(void 0);
-                },
-                onClick: (event) => {
-                  if (!event.target.closest(".sia-checkbox")) toggle(option);
-                },
-                children: multiple ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Checkbox2, { checked: selected.has(option.value), disabled: disabled || loading || option.disabled, tabIndex: -1, onChange: () => toggle(option), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "sia-selection-panel__text", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
-                  showValue && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("small", { children: String(option.value) })
-                ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "sia-selection-panel__text", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
-                  showValue && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("small", { children: String(option.value) })
-                ] })
-              }
-            ) }, `${typeof option.value}-${option.value}`))
-          },
-          row.key
-        )) })
-      }
-    )
-  ] });
-}
-
-// src/components/OverflowTags.tsx
-var import_react19 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-function OverflowTags({ items, maxCount: maxCount2, className = "", tagClassName, restClassName = "" }) {
-  const rootRef = (0, import_react19.useRef)(null);
-  const measureRef = (0, import_react19.useRef)(null);
-  const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount2) || 0));
-  const [visibleCount, setVisibleCount] = (0, import_react19.useState)(0);
-  (0, import_react19.useLayoutEffect)(() => {
-    const root = rootRef.current;
-    const measure = measureRef.current;
-    if (!root || !measure) return;
-    const update = () => {
-      const gap = Number.parseFloat(getComputedStyle(root).columnGap) || 0;
-      const widths = Array.from(measure.children, (child) => child.getBoundingClientRect().width);
-      let used = 0;
-      let fitting = 0;
-      for (let count2 = 1; count2 <= limit; count2 += 1) {
-        used += widths[count2 - 1] + (count2 > 1 ? gap : 0);
-        const rest = count2 < items.length ? gap + widths[limit + count2] : 0;
-        if (used + rest <= root.clientWidth) fitting = count2;
-      }
-      setVisibleCount((previous) => previous === fitting ? previous : fitting);
-    };
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(root);
-    for (const child of measure.children) observer.observe(child);
-    return () => observer.disconnect();
-  }, [items, limit]);
-  const count = Math.min(visibleCount, limit);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { ref: rootRef, className: `sia-overflow-tags ${className}`.trim(), children: [
-    items.slice(0, count).map((item) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
-    items.length > count ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: `${tagClassName} sia-overflow-tags__rest ${restClassName}`.trim(), children: [
-      "+",
-      items.length - count
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { ref: measureRef, className: "sia-overflow-tags__measure", "aria-hidden": "true", children: [
-      items.slice(0, limit).map((item) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
-      Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: `${tagClassName} ${restClassName}`.trim(), children: [
-        "+",
-        items.length - index
-      ] }, `rest-${index}`))
-    ] })
-  ] });
-}
+var import_react20 = require("react");
 
 // src/components/FloatingScrollbarProvider.tsx
-var import_react21 = require("react");
+var import_react19 = require("react");
 
 // src/components/useScrollbarProximity.ts
-var import_react20 = require("react");
+var import_react18 = require("react");
 var users = 0;
 var cleanup;
 function useScrollbarProximity() {
-  (0, import_react20.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (users++ === 0) {
       let frame = 0;
       let x = -Infinity;
@@ -3203,7 +2968,7 @@ function createTrack(axis) {
 }
 function FloatingScrollbarProvider({ disabled = false, targetRef }) {
   useScrollbarProximity();
-  (0, import_react21.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (disabled) return;
     const layer = document.createElement("div");
     layer.className = "sia-floating-scrollbar-layer";
@@ -3449,6 +3214,244 @@ function FloatingScrollbarProvider({ disabled = false, targetRef }) {
   return null;
 }
 
+// src/components/SelectionPanel.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function SelectionPanel({
+  options,
+  value,
+  onChange,
+  multiple = false,
+  allowDeselect = false,
+  disabled = false,
+  loading = false,
+  showSearch = true,
+  showActions = true,
+  includeUnknownValues = true,
+  searchValue,
+  onSearch,
+  selectedOnly = false,
+  showValue = false,
+  displayField = "label",
+  columns = 1,
+  maxHeight = 250,
+  autoFocusSearch = false
+}) {
+  const [localSearch, setLocalSearch] = (0, import_react20.useState)("");
+  const search = searchValue ?? localSearch;
+  const [scrollTop, setScrollTop] = (0, import_react20.useState)(0);
+  const [active, setActive] = (0, import_react20.useState)();
+  const [keyboardActive, setKeyboardActive] = (0, import_react20.useState)(false);
+  const [deselectedHover, setDeselectedHover] = (0, import_react20.useState)();
+  const listRef = (0, import_react20.useRef)(null);
+  const id = (0, import_react20.useId)();
+  const selected = (0, import_react20.useMemo)(() => new Set(value), [value]);
+  const count = Math.max(1, Math.floor(columns));
+  const allOptions = (0, import_react20.useMemo)(() => {
+    if (!includeUnknownValues) return [...options];
+    const known = new Set(options.filter((option) => option.optionType !== "divider").map((option) => option.value));
+    return [...value.filter((item) => !known.has(item)).map((item) => ({ value: item, label: String(item), group: "\u81EA\u5B9A\u4E49\u503C" })), ...options];
+  }, [options, value, includeUnknownValues]);
+  const filtered = (0, import_react20.useMemo)(
+    () => allOptions.filter((option) => (!selectedOnly || selected.has(option.value)) && (!search || option.optionType !== "divider" && [option.label, option.value].some((text) => String(text ?? "").toLowerCase().includes(search.toLowerCase())))),
+    [allOptions, selectedOnly, selected, search]
+  );
+  const rows = (0, import_react20.useMemo)(() => {
+    const groups = /* @__PURE__ */ new Map();
+    filtered.forEach((option) => {
+      const items = groups.get(option.group) ?? [];
+      items.push(option);
+      groups.set(option.group, items);
+    });
+    const rows2 = [];
+    let top = 0;
+    for (const [group, items] of groups) {
+      if (group) {
+        rows2.push({ key: `group-${rows2.length}`, title: group, top, height: 30 });
+        top += 30;
+      }
+      for (let index = 0; index < items.length; index += count) {
+        const height = showValue ? 48 : 34;
+        rows2.push({ key: `row-${rows2.length}`, items: items.slice(index, index + count), top, height });
+        top += height;
+      }
+    }
+    return rows2;
+  }, [filtered, count, showValue]);
+  const totalHeight = rows.length ? rows[rows.length - 1].top + rows[rows.length - 1].height : 0;
+  const virtual = filtered.length > 100;
+  const renderedRows = virtual ? rows.filter((row) => row.top + row.height >= scrollTop - 100 && row.top <= scrollTop + maxHeight + 100) : rows;
+  const enabled = filtered.filter((option) => !option.disabled && option.optionType !== "divider");
+  (0, import_react20.useEffect)(() => {
+    setScrollTop(0);
+    if (listRef.current) listRef.current.scrollTop = 0;
+    setActive(void 0);
+  }, [search, selectedOnly, count]);
+  function toggle(option, keyboard = false) {
+    if (disabled || loading || option.disabled || option.optionType === "divider") return;
+    setActive(option.value);
+    setKeyboardActive(keyboard);
+    setDeselectedHover(!keyboard && !multiple && allowDeselect && selected.has(option.value) ? option.value : void 0);
+    onChange(multiple ? selected.has(option.value) ? value.filter((item) => item !== option.value) : [...value, option.value] : allowDeselect && selected.has(option.value) ? [] : [option.value]);
+  }
+  function batch(operation) {
+    if (disabled || loading) return;
+    if (operation === "clear") {
+      onChange([]);
+      return;
+    }
+    const editable = new Set(enabled.map((option) => option.value));
+    const retained = value.filter((item) => !editable.has(item));
+    const add = enabled.filter((option) => operation === "all" || !selected.has(option.value)).map((option) => option.value);
+    onChange([...retained, ...add]);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "sia-selection-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
+    showSearch && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      Input,
+      {
+        "aria-label": "\u641C\u7D22\u9009\u9879",
+        placeholder: "\u641C\u7D22",
+        autoFocus: autoFocusSearch,
+        value: search,
+        allowClear: true,
+        onChange: (event) => {
+          setLocalSearch(event.target.value);
+          onSearch?.(event.target.value);
+        }
+      }
+    ),
+    multiple && showActions && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "sia-selection-panel__actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("all"), children: "\u5168\u9009" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("invert"), children: "\u53CD\u9009" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !value.length, onClick: () => batch("clear"), children: "\u6E05\u7A7A" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
+        "\u5DF2\u9009 ",
+        value.length,
+        " \u9879"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "div",
+      {
+        ref: listRef,
+        role: "listbox",
+        "aria-label": "\u9009\u9879\u5217\u8868",
+        "aria-multiselectable": multiple || void 0,
+        tabIndex: disabled ? -1 : 0,
+        className: "sia-selection-panel__list",
+        style: { maxHeight },
+        onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+        onPointerDown: () => setKeyboardActive(false),
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) setKeyboardActive(false);
+        },
+        "aria-activedescendant": active !== void 0 ? `${id}-${typeof active}-${active}` : void 0,
+        onKeyDown: (event) => {
+          if (event.target instanceof HTMLInputElement) return;
+          if (disabled || loading || !enabled.length) return;
+          const index = enabled.findIndex((option) => option.value === active);
+          if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+            event.preventDefault();
+            setKeyboardActive(true);
+            setDeselectedHover(void 0);
+            const next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : Math.max(0, Math.min(enabled.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
+            const option = enabled[next];
+            setActive(option.value);
+            const row = rows.find((row2) => row2.items?.includes(option));
+            if (row && listRef.current) {
+              listRef.current.scrollTop = Math.max(0, row.top - maxHeight / 2);
+              setScrollTop(listRef.current.scrollTop);
+            }
+          } else if ((event.key === "Enter" || event.key === " ") && index >= 0) {
+            event.preventDefault();
+            toggle(enabled[index], true);
+          }
+        },
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "div",
+          {
+            className: row.title !== void 0 ? "sia-selection-panel__group" : "sia-selection-panel__row",
+            style: { position: "absolute", top: row.top, height: row.height, width: "100%", gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` },
+            children: row.title ?? row.items?.map((option, index) => option.optionType === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { role: "separator", className: "sia-selection-panel__divider" }, `divider-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip, { title: option.disabled ? option.disabledTip : void 0, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              "div",
+              {
+                role: "option",
+                id: `${id}-${typeof option.value}-${option.value}`,
+                tabIndex: -1,
+                "aria-selected": selected.has(option.value),
+                "aria-disabled": disabled || option.disabled || void 0,
+                className: `sia-selection-panel__option${keyboardActive && active === option.value ? " is-active" : ""}`,
+                "data-deselected-hover": deselectedHover === option.value || void 0,
+                onPointerLeave: () => {
+                  if (deselectedHover === option.value) setDeselectedHover(void 0);
+                },
+                onClick: (event) => {
+                  if (!event.target.closest(".sia-checkbox")) toggle(option);
+                },
+                children: multiple ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Checkbox2, { checked: selected.has(option.value), disabled: disabled || loading || option.disabled, tabIndex: -1, onChange: () => toggle(option), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "sia-selection-panel__text", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
+                  showValue && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("small", { children: String(option.value) })
+                ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "sia-selection-panel__text", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
+                  showValue && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("small", { children: String(option.value) })
+                ] })
+              }
+            ) }, `${typeof option.value}-${option.value}`))
+          },
+          row.key
+        )) })
+      }
+    )
+  ] });
+}
+
+// src/components/OverflowTags.tsx
+var import_react21 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function OverflowTags({ items, maxCount: maxCount2, className = "", tagClassName, restClassName = "" }) {
+  const rootRef = (0, import_react21.useRef)(null);
+  const measureRef = (0, import_react21.useRef)(null);
+  const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount2) || 0));
+  const [visibleCount, setVisibleCount] = (0, import_react21.useState)(0);
+  (0, import_react21.useLayoutEffect)(() => {
+    const root = rootRef.current;
+    const measure = measureRef.current;
+    if (!root || !measure) return;
+    const update = () => {
+      const gap = Number.parseFloat(getComputedStyle(root).columnGap) || 0;
+      const widths = Array.from(measure.children, (child) => child.getBoundingClientRect().width);
+      let used = 0;
+      let fitting = 0;
+      for (let count2 = 1; count2 <= limit; count2 += 1) {
+        used += widths[count2 - 1] + (count2 > 1 ? gap : 0);
+        const rest = count2 < items.length ? gap + widths[limit + count2] : 0;
+        if (used + rest <= root.clientWidth) fitting = count2;
+      }
+      setVisibleCount((previous) => previous === fitting ? previous : fitting);
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(root);
+    for (const child of measure.children) observer.observe(child);
+    return () => observer.disconnect();
+  }, [items, limit]);
+  const count = Math.min(visibleCount, limit);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { ref: rootRef, className: `sia-overflow-tags ${className}`.trim(), children: [
+    items.slice(0, count).map((item) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
+    items.length > count ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: `${tagClassName} sia-overflow-tags__rest ${restClassName}`.trim(), children: [
+      "+",
+      items.length - count
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { ref: measureRef, className: "sia-overflow-tags__measure", "aria-hidden": "true", children: [
+      items.slice(0, limit).map((item) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
+      Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: `${tagClassName} ${restClassName}`.trim(), children: [
+        "+",
+        items.length - index
+      ] }, `rest-${index}`))
+    ] })
+  ] });
+}
+
 // src/components/Select.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function defaultFilterOption(query, option) {
@@ -3511,6 +3514,8 @@ var Select = (0, import_react22.forwardRef)(function Select2({
   const [query, setQuery] = (0, import_react22.useState)("");
   const [activeIndex, setActiveIndex] = (0, import_react22.useState)(-1);
   const [scrollTop, setScrollTop] = (0, import_react22.useState)(0);
+  const [dropdownFontSize, setDropdownFontSize] = (0, import_react22.useState)();
+  const pendingSelectedScroll = (0, import_react22.useRef)(false);
   const deferredQuery = (0, import_react22.useDeferredValue)(query.trim());
   const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
   const [currentValue, setCurrentValue] = useControllableState({
@@ -3568,10 +3573,31 @@ var Select = (0, import_react22.forwardRef)(function Select2({
   (0, import_react22.useEffect)(() => {
     if (disabled || loading) closeDropdown();
   }, [disabled, loading]);
+  (0, import_react22.useEffect)(() => {
+    if (!open || popupMode !== "dropdown" || !pendingSelectedScroll.current || query) return;
+    const index = filteredOptions.findIndex((option) => selectedValueSet.has(option.value));
+    if (index < 0) return;
+    const frame = requestAnimationFrame(() => {
+      const list = listRef.current;
+      if (!list) return;
+      const item = virtualEnabled ? null : list.querySelectorAll('[role="option"]')[index];
+      const top = virtualEnabled ? index * optionHeight : item ? item.getBoundingClientRect().top - list.getBoundingClientRect().top + list.scrollTop : 0;
+      list.scrollTop = Math.max(0, top - (list.clientHeight - (item?.offsetHeight ?? optionHeight)) / 2);
+      setScrollTop(list.scrollTop);
+      pendingSelectedScroll.current = false;
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [open, popupMode, filteredOptions, selectedValueSet, virtualEnabled, optionHeight, query]);
+  (0, import_react22.useLayoutEffect)(() => {
+    if (!open || popupMode !== "dropdown") return;
+    const trigger = rootRef.current?.querySelector(".sia-select__trigger");
+    if (trigger) setDropdownFontSize(getComputedStyle(trigger).fontSize);
+  }, [open, popupMode, size]);
   function firstEnabledIndex() {
     return filteredOptions.findIndex((option) => !option.disabled);
   }
   function closeDropdown() {
+    pendingSelectedScroll.current = false;
     setOpen(false);
     setQuery("");
     setScrollTop(0);
@@ -3596,6 +3622,7 @@ var Select = (0, import_react22.forwardRef)(function Select2({
   }
   function openDropdown() {
     if (disabled || loading) return;
+    pendingSelectedScroll.current = true;
     setOpenedMode(automaticMode);
     const selectedIndex = filteredOptions.findIndex((option) => selectedValueSet.has(option.value) && !option.disabled);
     setActiveIndex(selectedIndex >= 0 ? selectedIndex : firstEnabledIndex());
@@ -3770,7 +3797,7 @@ var Select = (0, import_react22.forwardRef)(function Select2({
       }
     ),
     allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { className: "sia-select__clear", type: "button", "aria-label": "\u6E05\u7A7A\u9009\u62E9", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && popupMode === "dropdown", className: `sia-select__dropdown${filteredOptions.length === 0 && !canSubmitInput ? " sia-select__dropdown--empty" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && popupMode === "dropdown", style: { fontSize: dropdownFontSize }, className: `sia-select__dropdown${filteredOptions.length === 0 && !canSubmitInput ? " sia-select__dropdown--empty" : ""}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
       showSearch || allowInput ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "sia-select__search", children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "search", size: 15 }),

package/dist/core.css

@@ -2393,6 +2393,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   padding-inline: 16px;
 }
 .sia-message {
+  font-size: calc(var(--sia-font-size, 16px) - 1px);
   display: flex;
   align-items: center;
   gap: 9px;
@@ -6223,7 +6224,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   width: max-content;
   overflow: hidden;
   color: var(--sia-color-text);
-  font-size: var(--sia-font-size);
+  font-size: calc(var(--sia-font-size) + 1px);
   background: var(--sia-color-surface);
   border: 1px solid var(--sia-color-border);
   border-radius: 10px;
@@ -6235,7 +6236,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 }
 .sia-time-panel .sia-date-panel__time > strong {
   font-variant-numeric: tabular-nums;
-  font-size: 15px;
+  font-size: 16px;
 }
 .sia-time-panel .sia-date-panel__time-columns {
   grid-auto-columns: 64px;
@@ -6398,6 +6399,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   }
 }
 .sia-date-panel {
+  font-size: calc(1em + 1px);
   width: 282px;
   max-width: calc(100vw - 16px);
   max-height: min(640px, calc(100vh - 16px));
@@ -6501,7 +6503,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   color: var(--sia-color-primary-text);
   background: color-mix(in srgb, var(--sia-color-primary) 10%, transparent);
   border-radius: 4px;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
 }
 .sia-date-panel__nav {
@@ -6644,9 +6646,8 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 }
 .sia-date-panel__time-columns > div {
   height: 100%;
-  overflow: var(--sia-scroll-overflow, auto);
+  overflow: auto;
   padding: 4px;
-  scrollbar-width: thin;
 }
 .sia-date-panel__time-columns > div + div {
   border-inline-start: 1px solid var(--sia-color-border);
@@ -9682,6 +9683,10 @@ button.sia-treemap__tile:focus-visible,
   text-align: center;
   color: var(--sia-color-text-secondary, #777);
 }
+.sia-date-panel button,
+.sia-time-panel button {
+  font: inherit;
+}
 
 /* src/title-tooltip.css */
 body > .sia-title-tooltip[data-sia-popup-layer] {

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, T as TagStatus, az as TagVariant, aD as Toolbar, aE as ToolbarItem, aF as ToolbarProps, aQ as Typography, aR as TypographyLinkProps, aS as TypographyProps, aT as TypographyTitleProps, aU as TypographyType, aV as Upload, aW as UploadChangeInfo, aX as UploadDraggerProps, aY as UploadFile, aZ as UploadFileStatus, a_ as UploadProps, a$ as UploadRequestOptions, b3 as message } from './core-tbb9ZiBY.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-W_xpkpOW.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, T as TagStatus, az as TagVariant, aD as Toolbar, aE as ToolbarItem, aF as ToolbarProps, aQ as Typography, aR as TypographyLinkProps, aS as TypographyProps, aT as TypographyTitleProps, aU as TypographyType, aV as Upload, aW as UploadChangeInfo, aX as UploadDraggerProps, aY as UploadFile, aZ as UploadFileStatus, a_ as UploadProps, a$ as UploadRequestOptions, b3 as message } from './core-BM-wnJRa.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';