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

package/dist/index.cjs

@@ -393,7 +393,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;
@@ -2257,7 +2257,7 @@ var Input = (0, import_react12.forwardRef)(function Input2({
   size: sizeProp,
   prefix,
   suffix,
-  allowClear = false,
+  allowClear = true,
   onClear,
   showCount = false,
   placeholderMode,
@@ -2430,7 +2430,7 @@ var Checkbox2 = Object.assign(CheckboxRoot, {
 });
 
 // src/components/SelectionPanel.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 
 // src/components/FloatingDisplay.tsx
 var import_react14 = require("react");
@@ -2881,252 +2881,15 @@ function Tree({
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `sia-tree${showLine ? " sia-tree--line" : ""}${stickyAncestors ? " sia-tree--sticky-ancestors" : ""} ${className}`.trim(), role: "tree", "aria-multiselectable": multiple || void 0, ...withTitleTooltip(props), children: render(treeData) });
 }
 
-// src/components/SelectionPanel.tsx
-var import_jsx_runtime15 = 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_react15.useState)("");
-  const search = searchValue ?? localSearch;
-  const [scrollTop, setScrollTop] = (0, import_react15.useState)(0);
-  const [active, setActive] = (0, import_react15.useState)();
-  const [keyboardActive, setKeyboardActive] = (0, import_react15.useState)(false);
-  const [deselectedHover, setDeselectedHover] = (0, import_react15.useState)();
-  const listRef = (0, import_react15.useRef)(null);
-  const id = (0, import_react15.useId)();
-  const selected = (0, import_react15.useMemo)(() => new Set(value), [value]);
-  const count = Math.max(1, Math.floor(columns));
-  const allOptions = (0, import_react15.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_react15.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_react15.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_react15.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_runtime15.jsxs)("div", { className: "sia-selection-panel", children: [
-    showSearch && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)("div", { className: "sia-selection-panel__actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("all"), children: "\u5168\u9009" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("invert"), children: "\u53CD\u9009" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !value.length, onClick: () => batch("clear"), children: "\u6E05\u7A7A" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
-        "\u5DF2\u9009 ",
-        value.length,
-        " \u9879"
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)("div", { role: "separator", className: "sia-selection-panel__divider" }, `divider-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tooltip, { title: option.disabled ? option.disabledTip : void 0, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(Checkbox2, { checked: selected.has(option.value), disabled: disabled || loading || option.disabled, tabIndex: -1, onChange: () => toggle(option), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "sia-selection-panel__text", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
-                  showValue && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("small", { children: String(option.value) })
-                ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "sia-selection-panel__text", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
-                  showValue && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("small", { children: String(option.value) })
-                ] })
-              }
-            ) }, `${typeof option.value}-${option.value}`))
-          },
-          row.key
-        )) })
-      }
-    )
-  ] });
-}
-
-// src/components/OverflowTags.tsx
-var import_react16 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function OverflowTags({ items, maxCount: maxCount2, className = "", tagClassName, restClassName = "" }) {
-  const rootRef = (0, import_react16.useRef)(null);
-  const measureRef = (0, import_react16.useRef)(null);
-  const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount2) || 0));
-  const [visibleCount, setVisibleCount] = (0, import_react16.useState)(0);
-  (0, import_react16.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_runtime16.jsxs)("span", { ref: rootRef, className: `sia-overflow-tags ${className}`.trim(), children: [
-    items.slice(0, count).map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
-    items.length > count ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: `${tagClassName} sia-overflow-tags__rest ${restClassName}`.trim(), children: [
-      "+",
-      items.length - count
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { ref: measureRef, className: "sia-overflow-tags__measure", "aria-hidden": "true", children: [
-      items.slice(0, limit).map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
-      Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: `${tagClassName} ${restClassName}`.trim(), children: [
-        "+",
-        items.length - index
-      ] }, `rest-${index}`))
-    ] })
-  ] });
-}
-
 // src/components/FloatingScrollbarProvider.tsx
-var import_react18 = require("react");
+var import_react16 = require("react");
 
 // src/components/useScrollbarProximity.ts
-var import_react17 = require("react");
+var import_react15 = require("react");
 var users = 0;
 var cleanup;
 function useScrollbarProximity() {
-  (0, import_react17.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (users++ === 0) {
       let frame = 0;
       let x = -Infinity;
@@ -3247,7 +3010,7 @@ function createTrack(axis) {
 }
 function FloatingScrollbarProvider({ disabled = false, targetRef }) {
   useScrollbarProximity();
-  (0, import_react18.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (disabled) return;
     const layer = document.createElement("div");
     layer.className = "sia-floating-scrollbar-layer";
@@ -3493,6 +3256,244 @@ function FloatingScrollbarProvider({ disabled = false, targetRef }) {
   return null;
 }
 
+// src/components/SelectionPanel.tsx
+var import_jsx_runtime15 = 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_react17.useState)("");
+  const search = searchValue ?? localSearch;
+  const [scrollTop, setScrollTop] = (0, import_react17.useState)(0);
+  const [active, setActive] = (0, import_react17.useState)();
+  const [keyboardActive, setKeyboardActive] = (0, import_react17.useState)(false);
+  const [deselectedHover, setDeselectedHover] = (0, import_react17.useState)();
+  const listRef = (0, import_react17.useRef)(null);
+  const id = (0, import_react17.useId)();
+  const selected = (0, import_react17.useMemo)(() => new Set(value), [value]);
+  const count = Math.max(1, Math.floor(columns));
+  const allOptions = (0, import_react17.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_react17.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_react17.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_react17.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_runtime15.jsxs)("div", { className: "sia-selection-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
+    showSearch && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)("div", { className: "sia-selection-panel__actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("all"), children: "\u5168\u9009" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("invert"), children: "\u53CD\u9009" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !value.length, onClick: () => batch("clear"), children: "\u6E05\u7A7A" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
+        "\u5DF2\u9009 ",
+        value.length,
+        " \u9879"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)("div", { role: "separator", className: "sia-selection-panel__divider" }, `divider-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tooltip, { title: option.disabled ? option.disabledTip : void 0, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(Checkbox2, { checked: selected.has(option.value), disabled: disabled || loading || option.disabled, tabIndex: -1, onChange: () => toggle(option), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "sia-selection-panel__text", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
+                  showValue && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("small", { children: String(option.value) })
+                ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "sia-selection-panel__text", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
+                  showValue && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("small", { children: String(option.value) })
+                ] })
+              }
+            ) }, `${typeof option.value}-${option.value}`))
+          },
+          row.key
+        )) })
+      }
+    )
+  ] });
+}
+
+// src/components/OverflowTags.tsx
+var import_react18 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function OverflowTags({ items, maxCount: maxCount2, className = "", tagClassName, restClassName = "" }) {
+  const rootRef = (0, import_react18.useRef)(null);
+  const measureRef = (0, import_react18.useRef)(null);
+  const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount2) || 0));
+  const [visibleCount, setVisibleCount] = (0, import_react18.useState)(0);
+  (0, import_react18.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_runtime16.jsxs)("span", { ref: rootRef, className: `sia-overflow-tags ${className}`.trim(), children: [
+    items.slice(0, count).map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
+    items.length > count ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: `${tagClassName} sia-overflow-tags__rest ${restClassName}`.trim(), children: [
+      "+",
+      items.length - count
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { ref: measureRef, className: "sia-overflow-tags__measure", "aria-hidden": "true", children: [
+      items.slice(0, limit).map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
+      Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: `${tagClassName} ${restClassName}`.trim(), children: [
+        "+",
+        items.length - index
+      ] }, `rest-${index}`))
+    ] })
+  ] });
+}
+
 // src/components/Select.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function defaultFilterOption(query, option) {
@@ -3555,6 +3556,8 @@ var Select = (0, import_react19.forwardRef)(function Select2({
   const [query, setQuery] = (0, import_react19.useState)("");
   const [activeIndex, setActiveIndex] = (0, import_react19.useState)(-1);
   const [scrollTop, setScrollTop] = (0, import_react19.useState)(0);
+  const [dropdownFontSize, setDropdownFontSize] = (0, import_react19.useState)();
+  const pendingSelectedScroll = (0, import_react19.useRef)(false);
   const deferredQuery = (0, import_react19.useDeferredValue)(query.trim());
   const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
   const [currentValue, setCurrentValue] = useControllableState({
@@ -3612,10 +3615,31 @@ var Select = (0, import_react19.forwardRef)(function Select2({
   (0, import_react19.useEffect)(() => {
     if (disabled || loading) closeDropdown();
   }, [disabled, loading]);
+  (0, import_react19.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_react19.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);
@@ -3640,6 +3664,7 @@ var Select = (0, import_react19.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());
@@ -3814,7 +3839,7 @@ var Select = (0, import_react19.forwardRef)(function Select2({
       }
     ),
     allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: "sia-select__clear", type: "button", "aria-label": "\u6E05\u7A7A\u9009\u62E9", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.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_runtime17.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
       showSearch || allowInput ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "sia-select__search", children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "search", size: 15 }),
@@ -4099,7 +4124,7 @@ function Cascader({
   size: sizeProp,
   multiple = false,
   showSearch = false,
-  allowClear = false,
+  allowClear = true,
   changeOnSelect = false,
   expandTrigger = "click",
   placeholder = "\u8BF7\u9009\u62E9",
@@ -6429,7 +6454,7 @@ function ColorPicker({
   defaultMode = "solid",
   modes = DEFAULT_MODES,
   disabled = false,
-  allowClear = false,
+  allowClear = true,
   showText = false,
   showAlpha = false,
   presets,
@@ -6814,6 +6839,10 @@ function TimePanel({
 }) {
   const [hour = "00", minute = "00", second = "00"] = value.split(":");
   const columnsRef = (0, import_react33.useRef)(null);
+  const hourRef = (0, import_react33.useRef)(null);
+  const minuteRef = (0, import_react33.useRef)(null);
+  const secondRef = (0, import_react33.useRef)(null);
+  const columnRefs = [hourRef, minuteRef, secondRef];
   (0, import_react33.useLayoutEffect)(() => {
     for (const column of columnsRef.current?.children ?? []) {
       const selected = column.querySelector('[aria-selected="true"]');
@@ -6844,7 +6873,7 @@ function TimePanel({
       showSecond ? `:${second}` : "",
       use12Hours ? Number(hour) < 12 ? " AM" : " PM" : ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: columnsRef, className: "sia-date-panel__time-columns", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { role: "listbox", "aria-label": `${ariaLabel}${column.label}`, children: Array.from({ length: column.count }, (_, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: columnsRef, className: "sia-date-panel__time-columns", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: columnRefs[column.index], role: "listbox", "aria-label": `${ariaLabel}${column.label}`, children: Array.from({ length: column.count }, (_, index) => {
       const next = pad2(index);
       const candidate = [hour, minute, second];
       candidate[column.index] = next;
@@ -6856,7 +6885,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 ? `${pad2(index % 12 || 12)} ${index < 12 ? "AM" : "PM"}` : next }, next);
-    }) }, column.label)) })
+    }) }, column.label)) }),
+    columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FloatingScrollbarProvider, { targetRef: columnRefs[column.index] }, column.index))
   ] });
 }
 function DatePanelFooter({
@@ -7734,7 +7764,7 @@ function TreeSelect({
   multiple = false,
   treeCheckable = false,
   showSearch = false,
-  allowClear = false,
+  allowClear = true,
   treeDefaultExpandAll = false,
   placeholder = "\u8BF7\u9009\u62E9",
   placeholderMode,
@@ -11676,6 +11706,16 @@ function createCellSelectionPlugin(options = {}) {
         event.clipboardData?.setData("text/plain", text);
         options.onCopy?.(text, selectedCells(context));
       };
+      const clearOnOutsidePointerDown = (event) => {
+        const context = latestContext;
+        if (event.button !== 0 || !context?.state.range || !activeRoot) return;
+        const target = event.target instanceof Element ? event.target : null;
+        const cell = target?.closest("td[data-column-key], th[data-column-key]");
+        if (cell?.closest(".sia-table") === activeRoot) return;
+        stopDragging();
+        setSelection(context, null);
+      };
+      document.addEventListener("pointerdown", clearOnOutsidePointerDown, true);
       window.addEventListener("pointerup", stopDragging);
       window.addEventListener("pointercancel", stopDragging);
       window.addEventListener("blur", stopDragging);
@@ -11684,6 +11724,7 @@ function createCellSelectionPlugin(options = {}) {
       document.addEventListener("copy", handleCopy);
       return () => {
         stopDragging();
+        document.removeEventListener("pointerdown", clearOnOutsidePointerDown, true);
         window.removeEventListener("pointerup", stopDragging);
         window.removeEventListener("pointercancel", stopDragging);
         window.removeEventListener("blur", stopDragging);
@@ -13765,6 +13806,7 @@ function TableInner(props, ref) {
     stickyHeader = true,
     resizable = true,
     cellSelection = true,
+    showIndex = true,
     onRowClick,
     onRowDoubleClick,
     onCellContextMenu,
@@ -13788,13 +13830,15 @@ function TableInner(props, ref) {
   const builtInResizePlugin = (0, import_react50.useMemo)(() => createResizePlugin(), []);
   const builtInHighlightPlugin = (0, import_react50.useMemo)(() => createHighlightPlugin(), []);
   const builtInCellSelectionPlugin = (0, import_react50.useMemo)(() => createCellSelectionPlugin(), []);
+  const builtInIndexPlugin = (0, import_react50.useMemo)(() => createIndexPlugin(), []);
   const activePlugins = (0, import_react50.useMemo)(() => {
-    const plugins = providedPlugins.filter((plugin) => (resizable || plugin.id !== "resize") && (cellSelection || plugin.id !== "cellSelection"));
+    const plugins = providedPlugins.filter((plugin) => (resizable || plugin.id !== "resize") && (cellSelection || plugin.id !== "cellSelection") && (showIndex || plugin.id !== "index"));
     if (!plugins.some((plugin) => plugin.id === "highlight")) plugins.push(builtInHighlightPlugin);
     if (resizable && !plugins.some((plugin) => plugin.id === "resize")) plugins.push(builtInResizePlugin);
     if (cellSelection && !plugins.some((plugin) => plugin.id === "cellSelection")) plugins.push(builtInCellSelectionPlugin);
+    if (showIndex && !plugins.some((plugin) => plugin.id === "index")) plugins.push(builtInIndexPlugin);
     return plugins;
-  }, [builtInHighlightPlugin, builtInResizePlugin, builtInCellSelectionPlugin, providedPlugins, resizable, cellSelection]);
+  }, [builtInHighlightPlugin, builtInResizePlugin, builtInCellSelectionPlugin, builtInIndexPlugin, providedPlugins, resizable, cellSelection, showIndex]);
   const sortedPlugins = (0, import_react50.useMemo)(() => [...activePlugins].sort((a, b) => (a.order ?? 100) - (b.order ?? 100)), [activePlugins]);
   const pluginsByIdRef = (0, import_react50.useRef)(/* @__PURE__ */ new Map());
   pluginsByIdRef.current = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));