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

package/dist/{Select-O_yY51vc.d.ts → Select-CCrPqULn.d.ts}

@@ -301,7 +301,7 @@ interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "def
      */
     notFoundContent?: ReactNode;
 }
-/** 选择器组件。 */
+/** 选择器组件。下拉面板每次展开自动定位到列表顺序中的第一个已选项，支持普通和虚拟列表；未选中时从顶部显示。 */
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
 
 export { type ButtonProps as B, type ModalOpenConfig as M, type OverlayContainer as O, type SelectOption as S, type OverlayApiHandle as a, type SelectChangeValue as b, type SelectProps as c, type ModalActionResult as d, type ButtonSize as e, Button as f, type ButtonVariant as g, Modal as h, type ModalProps as i, type ModalType as j, Select as k, type SelectMode as l, type SelectValue as m };

package/dist/{Select-W_xpkpOW.d.cts → Select-YJbT-MF1.d.cts}

@@ -301,7 +301,7 @@ interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "def
      */
     notFoundContent?: ReactNode;
 }
-/** 选择器组件。 */
+/** 选择器组件。下拉面板每次展开自动定位到列表顺序中的第一个已选项，支持普通和虚拟列表；未选中时从顶部显示。 */
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
 
 export { type ButtonProps as B, type ModalOpenConfig as M, type OverlayContainer as O, type SelectOption as S, type OverlayApiHandle as a, type SelectChangeValue as b, type SelectProps as c, type ModalActionResult as d, type ButtonSize as e, Button as f, type ButtonVariant as g, Modal as h, type ModalProps as i, type ModalType as j, Select as k, type SelectMode as l, type SelectValue as m };

package/dist/chart.cjs

@@ -317,7 +317,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;

package/dist/chart.js

@@ -56,10 +56,10 @@ import {
   smoothSvgPath,
   svgArcPath,
   transferCompositeValue
-} from "./chunk-GUXAWU63.js";
-import "./chunk-OH6YILJW.js";
-import "./chunk-6WBABNAX.js";
-import "./chunk-NSSPGXNM.js";
+} from "./chunk-TZROBD65.js";
+import "./chunk-YQDHCORW.js";
+import "./chunk-IYNS423D.js";
+import "./chunk-RAO3JHDL.js";
 export {
   BarChart,
   CHART_VIEWBOX_HEIGHT,

package/dist/{chunk-6R7JY7IY.js → chunk-5MW3NE2V.js}

@@ -2,10 +2,10 @@ import {
   Dropdown,
   Icon,
   Input
-} from "./chunk-LRPQ5FGE.js";
+} from "./chunk-YF2I6SDB.js";
 import {
   Button
-} from "./chunk-6WBABNAX.js";
+} from "./chunk-IYNS423D.js";
 import {
   ControlSizeContext,
   PopupPortal,
@@ -13,7 +13,7 @@ import {
   useControllableState,
   useFloatingPlaceholder,
   withTitleTooltip
-} from "./chunk-NSSPGXNM.js";
+} from "./chunk-RAO3JHDL.js";
 
 // src/components/Checkbox.tsx
 import { createContext, forwardRef, useContext, useEffect, useId, useMemo, useRef } from "react";
@@ -852,206 +852,15 @@ var Modal2 = Object.assign(ModalRoot, {
   }
 });
 
-// src/components/SelectionPanel.tsx
-import { useEffect as useEffect5, useId as useId4, useMemo as useMemo3, useRef as useRef5, useState as useState3 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "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] = useState3("");
-  const search = searchValue ?? localSearch;
-  const [scrollTop, setScrollTop] = useState3(0);
-  const [active, setActive] = useState3();
-  const [keyboardActive, setKeyboardActive] = useState3(false);
-  const [deselectedHover, setDeselectedHover] = useState3();
-  const listRef = useRef5(null);
-  const id = useId4();
-  const selected = useMemo3(() => new Set(value), [value]);
-  const count = Math.max(1, Math.floor(columns));
-  const allOptions = useMemo3(() => {
-    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 = useMemo3(
-    () => 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 = useMemo3(() => {
-    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");
-  useEffect5(() => {
-    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__ */ jsxs4("div", { className: "sia-selection-panel", children: [
-    showSearch && /* @__PURE__ */ jsx4(
-      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__ */ jsxs4("div", { className: "sia-selection-panel__actions", children: [
-      /* @__PURE__ */ jsx4(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("all"), children: "\u5168\u9009" }),
-      /* @__PURE__ */ jsx4(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("invert"), children: "\u53CD\u9009" }),
-      /* @__PURE__ */ jsx4(Button, { variant: "link", size: "small", disabled: disabled || loading || !value.length, onClick: () => batch("clear"), children: "\u6E05\u7A7A" }),
-      /* @__PURE__ */ jsxs4("span", { children: [
-        "\u5DF2\u9009 ",
-        value.length,
-        " \u9879"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx4(
-      "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__ */ jsx4("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ jsx4("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ jsx4("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ jsx4(
-          "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__ */ jsx4("div", { role: "separator", className: "sia-selection-panel__divider" }, `divider-${index}`) : /* @__PURE__ */ jsx4(Tooltip, { title: option.disabled ? option.disabledTip : void 0, placement: "right", children: /* @__PURE__ */ jsx4(
-              "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__ */ jsx4(Checkbox2, { checked: selected.has(option.value), disabled: disabled || loading || option.disabled, tabIndex: -1, onChange: () => toggle(option), children: /* @__PURE__ */ jsxs4("span", { className: "sia-selection-panel__text", children: [
-                  /* @__PURE__ */ jsx4("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
-                  showValue && /* @__PURE__ */ jsx4("small", { children: String(option.value) })
-                ] }) }) : /* @__PURE__ */ jsxs4("span", { className: "sia-selection-panel__text", children: [
-                  /* @__PURE__ */ jsx4("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
-                  showValue && /* @__PURE__ */ jsx4("small", { children: String(option.value) })
-                ] })
-              }
-            ) }, `${typeof option.value}-${option.value}`))
-          },
-          row.key
-        )) })
-      }
-    )
-  ] });
-}
-
 // src/components/FloatingScrollbarProvider.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect6 } from "react";
 
 // src/components/useScrollbarProximity.ts
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect5 } from "react";
 var users = 0;
 var cleanup;
 function useScrollbarProximity() {
-  useEffect6(() => {
+  useEffect5(() => {
     if (users++ === 0) {
       let frame = 0;
       let x = -Infinity;
@@ -1172,7 +981,7 @@ function createTrack(axis) {
 }
 function FloatingScrollbarProvider({ disabled = false, targetRef }) {
   useScrollbarProximity();
-  useEffect7(() => {
+  useEffect6(() => {
     if (disabled) return;
     const layer = document.createElement("div");
     layer.className = "sia-floating-scrollbar-layer";
@@ -1418,8 +1227,200 @@ function FloatingScrollbarProvider({ disabled = false, targetRef }) {
   return null;
 }
 
+// src/components/SelectionPanel.tsx
+import { useEffect as useEffect7, useId as useId4, useMemo as useMemo3, useRef as useRef5, useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "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] = useState3("");
+  const search = searchValue ?? localSearch;
+  const [scrollTop, setScrollTop] = useState3(0);
+  const [active, setActive] = useState3();
+  const [keyboardActive, setKeyboardActive] = useState3(false);
+  const [deselectedHover, setDeselectedHover] = useState3();
+  const listRef = useRef5(null);
+  const id = useId4();
+  const selected = useMemo3(() => new Set(value), [value]);
+  const count = Math.max(1, Math.floor(columns));
+  const allOptions = useMemo3(() => {
+    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 = useMemo3(
+    () => 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 = useMemo3(() => {
+    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");
+  useEffect7(() => {
+    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__ */ jsxs4("div", { className: "sia-selection-panel", children: [
+    /* @__PURE__ */ jsx4(FloatingScrollbarProvider, { targetRef: listRef }),
+    showSearch && /* @__PURE__ */ jsx4(
+      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__ */ jsxs4("div", { className: "sia-selection-panel__actions", children: [
+      /* @__PURE__ */ jsx4(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("all"), children: "\u5168\u9009" }),
+      /* @__PURE__ */ jsx4(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("invert"), children: "\u53CD\u9009" }),
+      /* @__PURE__ */ jsx4(Button, { variant: "link", size: "small", disabled: disabled || loading || !value.length, onClick: () => batch("clear"), children: "\u6E05\u7A7A" }),
+      /* @__PURE__ */ jsxs4("span", { children: [
+        "\u5DF2\u9009 ",
+        value.length,
+        " \u9879"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      "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__ */ jsx4("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ jsx4("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ jsx4("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ jsx4(
+          "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__ */ jsx4("div", { role: "separator", className: "sia-selection-panel__divider" }, `divider-${index}`) : /* @__PURE__ */ jsx4(Tooltip, { title: option.disabled ? option.disabledTip : void 0, placement: "right", children: /* @__PURE__ */ jsx4(
+              "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__ */ jsx4(Checkbox2, { checked: selected.has(option.value), disabled: disabled || loading || option.disabled, tabIndex: -1, onChange: () => toggle(option), children: /* @__PURE__ */ jsxs4("span", { className: "sia-selection-panel__text", children: [
+                  /* @__PURE__ */ jsx4("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
+                  showValue && /* @__PURE__ */ jsx4("small", { children: String(option.value) })
+                ] }) }) : /* @__PURE__ */ jsxs4("span", { className: "sia-selection-panel__text", children: [
+                  /* @__PURE__ */ jsx4("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
+                  showValue && /* @__PURE__ */ jsx4("small", { children: String(option.value) })
+                ] })
+              }
+            ) }, `${typeof option.value}-${option.value}`))
+          },
+          row.key
+        )) })
+      }
+    )
+  ] });
+}
+
 // src/components/Select.tsx
-import { forwardRef as forwardRef3, useDeferredValue, useEffect as useEffect8, useId as useId5, useMemo as useMemo4, useRef as useRef7, useState as useState5 } from "react";
+import { forwardRef as forwardRef3, useDeferredValue, useEffect as useEffect8, useId as useId5, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef7, useState as useState5 } from "react";
 
 // src/components/OverflowTags.tsx
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState4 } from "react";
@@ -1530,6 +1531,8 @@ var Select = forwardRef3(function Select2({
   const [query, setQuery] = useState5("");
   const [activeIndex, setActiveIndex] = useState5(-1);
   const [scrollTop, setScrollTop] = useState5(0);
+  const [dropdownFontSize, setDropdownFontSize] = useState5();
+  const pendingSelectedScroll = useRef7(false);
   const deferredQuery = useDeferredValue(query.trim());
   const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
   const [currentValue, setCurrentValue] = useControllableState({
@@ -1587,10 +1590,31 @@ var Select = forwardRef3(function Select2({
   useEffect8(() => {
     if (disabled || loading) closeDropdown();
   }, [disabled, loading]);
+  useEffect8(() => {
+    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]);
+  useLayoutEffect3(() => {
+    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);
@@ -1615,6 +1639,7 @@ var Select = forwardRef3(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());
@@ -1789,7 +1814,7 @@ var Select = forwardRef3(function Select2({
       }
     ),
     allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx6("button", { className: "sia-select__clear", type: "button", "aria-label": "\u6E05\u7A7A\u9009\u62E9", onClick: clearValue, children: /* @__PURE__ */ jsx6(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
-    /* @__PURE__ */ jsxs6(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && popupMode === "dropdown", className: `sia-select__dropdown${filteredOptions.length === 0 && !canSubmitInput ? " sia-select__dropdown--empty" : ""}`, children: [
+    /* @__PURE__ */ jsxs6(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__ */ jsx6(FloatingScrollbarProvider, { targetRef: listRef }),
       showSearch || allowInput ? /* @__PURE__ */ jsxs6("label", { className: "sia-select__search", children: [
         /* @__PURE__ */ jsx6(Icon, { name: "search", size: 15 }),
@@ -1929,9 +1954,9 @@ export {
   useOverlayLifecycle,
   OverlayPortal,
   Modal2 as Modal,
-  SelectionPanel,
-  OverflowTags,
   useScrollbarProximity,
   FloatingScrollbarProvider,
+  SelectionPanel,
+  OverflowTags,
   Select
 };

package/dist/{chunk-T2QIW4OO.js → chunk-IQU4GGLM.js}

@@ -1,16 +1,17 @@
 import {
+  FloatingScrollbarProvider,
   Select
-} from "./chunk-6R7JY7IY.js";
+} from "./chunk-5MW3NE2V.js";
 import {
   Icon
-} from "./chunk-LRPQ5FGE.js";
+} from "./chunk-YF2I6SDB.js";
 import {
   PopupPortal,
   useControlSize,
   useControllableState,
   useFloatingPlaceholder,
   withTitleTooltip
-} from "./chunk-NSSPGXNM.js";
+} from "./chunk-RAO3JHDL.js";
 
 // src/components/DatePicker.tsx
 import { useEffect, useId, useMemo, useRef as useRef2, useState } from "react";
@@ -161,6 +162,10 @@ function TimePanel({
 }) {
   const [hour = "00", minute = "00", second = "00"] = value.split(":");
   const columnsRef = useRef(null);
+  const hourRef = useRef(null);
+  const minuteRef = useRef(null);
+  const secondRef = useRef(null);
+  const columnRefs = [hourRef, minuteRef, secondRef];
   useLayoutEffect(() => {
     for (const column of columnsRef.current?.children ?? []) {
       const selected = column.querySelector('[aria-selected="true"]');
@@ -191,7 +196,7 @@ function TimePanel({
       showSecond ? `:${second}` : "",
       use12Hours ? Number(hour) < 12 ? " AM" : " PM" : ""
     ] }),
-    /* @__PURE__ */ jsx("div", { ref: columnsRef, className: "sia-date-panel__time-columns", children: columns.map((column) => /* @__PURE__ */ jsx("div", { role: "listbox", "aria-label": `${ariaLabel}${column.label}`, children: Array.from({ length: column.count }, (_, index) => {
+    /* @__PURE__ */ jsx("div", { ref: columnsRef, className: "sia-date-panel__time-columns", children: columns.map((column) => /* @__PURE__ */ jsx("div", { ref: columnRefs[column.index], role: "listbox", "aria-label": `${ariaLabel}${column.label}`, children: Array.from({ length: column.count }, (_, index) => {
       const next = pad(index);
       const candidate = [hour, minute, second];
       candidate[column.index] = next;
@@ -203,7 +208,8 @@ function TimePanel({
         const target = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : Math.max(0, Math.min(buttons.length - 1, position + (event.key === "ArrowDown" ? 1 : -1)));
         buttons[target]?.focus();
       }, onClick: () => update(column.index, next), children: use12Hours && column.index === 0 ? `${pad(index % 12 || 12)} ${index < 12 ? "AM" : "PM"}` : next }, next);
-    }) }, column.label)) })
+    }) }, column.label)) }),
+    columns.map((column) => /* @__PURE__ */ jsx(FloatingScrollbarProvider, { targetRef: columnRefs[column.index] }, column.index))
   ] });
 }
 function DatePanelFooter({

package/dist/{chunk-6WBABNAX.js → chunk-IYNS423D.js}

@@ -1,7 +1,7 @@
 import {
   useControlSize,
   withTitleTooltip
-} from "./chunk-NSSPGXNM.js";
+} from "./chunk-RAO3JHDL.js";
 
 // src/components/Button.tsx
 import { forwardRef, useRef } from "react";

package/dist/{chunk-RGXVPS37.js → chunk-LK56NX5F.js}

@@ -2,14 +2,14 @@ import {
   Dropdown,
   Icon,
   Input
-} from "./chunk-LRPQ5FGE.js";
+} from "./chunk-YF2I6SDB.js";
 import {
   Button
-} from "./chunk-6WBABNAX.js";
+} from "./chunk-IYNS423D.js";
 import {
   useFloatingPlaceholder,
   withTitleTooltip
-} from "./chunk-NSSPGXNM.js";
+} from "./chunk-RAO3JHDL.js";
 
 // src/components/RichTextEditor.tsx
 import { useEffect, useMemo, useRef, useState } from "react";