@sia.soul/sia-react-ui 0.1.4 → 0.1.6

package/dist/index.js

@@ -1259,7 +1259,7 @@ function openDrawer(config) {
   let currentOpen = true;
   let destroyed = false;
   let cleanupTimer;
-  function cleanup() {
+  function cleanup2() {
     if (destroyed) return;
     destroyed = true;
     if (cleanupTimer !== void 0) window.clearTimeout(cleanupTimer);
@@ -1271,7 +1271,7 @@ function openDrawer(config) {
     if (destroyed || !currentOpen) return;
     currentOpen = false;
     render();
-    cleanupTimer = window.setTimeout(cleanup, DRAWER_MOTION_DURATION + 100);
+    cleanupTimer = window.setTimeout(cleanup2, DRAWER_MOTION_DURATION + 100);
   }
   function render() {
     root.render(/* @__PURE__ */ jsx8(
@@ -1286,7 +1286,7 @@ function openDrawer(config) {
         afterOpen: () => currentConfig.afterOpen?.(),
         afterClose: () => {
           currentConfig.afterClose?.();
-          cleanup();
+          cleanup2();
         }
       }
     ));
@@ -3806,7 +3806,7 @@ function Markdown({ content, emptyText = "\u6682\u65E0 Markdown \u5185\u5BB9", r
     });
     return () => {
       cancelled = true;
-      cleanups.forEach((cleanup) => cleanup());
+      cleanups.forEach((cleanup2) => cleanup2());
     };
   }, [html, imagePreview, resolveImageSrc]);
   function openImagePreview(target) {
@@ -4398,6 +4398,68 @@ function Treemap({
   );
 }
 
+// src/components/useScrollbarProximity.ts
+import { useEffect as useEffect11 } from "react";
+var users = 0;
+var cleanup;
+function useScrollbarProximity() {
+  useEffect11(() => {
+    if (users++ === 0) {
+      let frame = 0;
+      let x = -Infinity;
+      let y = -Infinity;
+      const nearby = /* @__PURE__ */ new Set();
+      const clear = () => {
+        nearby.forEach((track) => track.removeAttribute("data-scrollbar-near"));
+        nearby.clear();
+      };
+      const update = () => {
+        frame = 0;
+        const next = /* @__PURE__ */ new Set();
+        document.querySelectorAll(".sia-scrollbar-track").forEach((track) => {
+          const rect = track.getBoundingClientRect();
+          const proximity = Number.parseFloat(getComputedStyle(track).getPropertyValue("--sia-scrollbar-proximity")) || 16;
+          if (rect.width && rect.height && x >= rect.left - proximity && x <= rect.right + proximity && y >= rect.top - proximity && y <= rect.bottom + proximity) {
+            next.add(track);
+            if (!nearby.has(track)) track.setAttribute("data-scrollbar-near", "true");
+          }
+        });
+        nearby.forEach((track) => {
+          if (!next.has(track)) track.removeAttribute("data-scrollbar-near");
+        });
+        nearby.clear();
+        next.forEach((track) => nearby.add(track));
+      };
+      const move = (event) => {
+        if (event.pointerType === "touch") return;
+        x = event.clientX;
+        y = event.clientY;
+        if (!frame) frame = requestAnimationFrame(update);
+      };
+      const leave = () => {
+        x = y = -Infinity;
+        clear();
+      };
+      document.addEventListener("pointermove", move, { passive: true });
+      document.documentElement.addEventListener("pointerleave", leave);
+      window.addEventListener("blur", leave);
+      cleanup = () => {
+        if (frame) cancelAnimationFrame(frame);
+        document.removeEventListener("pointermove", move);
+        document.documentElement.removeEventListener("pointerleave", leave);
+        window.removeEventListener("blur", leave);
+        clear();
+      };
+    }
+    return () => {
+      if (--users === 0) {
+        cleanup?.();
+        cleanup = void 0;
+      }
+    };
+  }, []);
+}
+
 // src/components/Table/TableCellContent.tsx
 import { useLayoutEffect, useRef as useRef12, useState as useState15 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
@@ -4408,21 +4470,39 @@ function TableCellContent({ children, ellipsis, title }) {
   useLayoutEffect(() => {
     const element = ref.current;
     if (!element || !ellipsis || !customContent) return;
-    const update = () => setOverflowing(element.scrollWidth > element.clientWidth + 1);
+    const layouts = [];
+    const normalizeLayouts = (parent) => {
+      for (const child of parent.children) {
+        if (!(child instanceof HTMLElement)) continue;
+        const component = [...child.classList].some((name) => name.startsWith("sia-") && !name.startsWith("sia-space") && name !== "sia-flex");
+        if (component || child.matches("button, input, textarea, select, [contenteditable]")) continue;
+        const display = getComputedStyle(child).display;
+        if (["flex", "inline-flex", "grid", "inline-grid"].includes(display)) {
+          child.setAttribute("data-table-inline-layout", "");
+          layouts.push(child);
+        }
+        normalizeLayouts(child);
+      }
+    };
+    normalizeLayouts(element);
+    const update = () => setOverflowing(element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1);
     update();
     const observer = new ResizeObserver(update);
     observer.observe(element);
     for (const child of element.children) observer.observe(child);
-    return () => observer.disconnect();
+    return () => {
+      observer.disconnect();
+      layouts.forEach((layout) => layout.removeAttribute("data-table-inline-layout"));
+    };
   }, [children, ellipsis, customContent]);
-  return /* @__PURE__ */ jsx19("div", { ref, className: "sia-table__cell-content", title, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children });
+  return /* @__PURE__ */ jsx19("div", { ref, className: "sia-table__cell-content", title, "data-custom-content": customContent || void 0, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children });
 }
 
 // src/components/Table/Table.tsx
-import { Fragment as Fragment7, forwardRef as forwardRef5, memo, useCallback as useCallback2, useEffect as useEffect12, useImperativeHandle, useMemo as useMemo9, useRef as useRef14, useState as useState17 } from "react";
+import { Fragment as Fragment7, forwardRef as forwardRef5, memo, useCallback as useCallback2, useEffect as useEffect13, useImperativeHandle, useMemo as useMemo9, useRef as useRef14, useState as useState17 } from "react";
 
 // src/components/Table/plugins.tsx
-import { isValidElement as isValidElement3, useEffect as useEffect11, useRef as useRef13, useState as useState16 } from "react";
+import { isValidElement as isValidElement3, useEffect as useEffect12, useRef as useRef13, useState as useState16 } from "react";
 
 // src/components/Table/utils.ts
 var AUTO_WIDTH_COLUMN_KEYS = /* @__PURE__ */ new Set(["action", "actions", "operation", "operations"]);
@@ -5172,7 +5252,7 @@ function TableFilterControl({
   const [open, setOpen] = useState16(false);
   const [draft, setDraft] = useState16(value);
   const label = getColumnLabel(column);
-  useEffect11(() => {
+  useEffect12(() => {
     if (open) setDraft(value);
   }, [open, value]);
   const apply = (nextValue) => {
@@ -5445,7 +5525,7 @@ function EditableTableCell({
   const savingRef = useRef13(false);
   const saveRef = useRef13(async () => {
   });
-  useEffect11(() => {
+  useEffect12(() => {
     if (!active) return;
     editValueRef.current = value;
     setEditValue(value);
@@ -5476,7 +5556,7 @@ function EditableTableCell({
     }
   }
   saveRef.current = save;
-  useEffect11(() => {
+  useEffect12(() => {
     if (!active || config.type === "select" || config.type === "custom") return;
     const handleOutsidePointerDown = (event) => {
       const target = event.target;
@@ -5637,7 +5717,7 @@ function applyColumnSettingsToTree(columns, items) {
 function ColumnSettingPanel({ open, items, columns, onClose, onApply }) {
   const [draft, setDraft] = useState16(items);
   const dragIndex = useRef13(null);
-  useEffect11(() => {
+  useEffect12(() => {
     if (open) setDraft(items);
   }, [items, open]);
   const labels = new Map(flattenTableColumns(columns).map((column) => [column.key, getColumnLabel(column)]));
@@ -5732,7 +5812,30 @@ function createColumnSettingPlugin(options = {}) {
         void save({ columns: currentItems(context), pageSize, version: 1 });
       }
     },
-    renderToolbarEnd: options.showButton === false ? void 0 : (context) => /* @__PURE__ */ jsx20(Button, { size: "small", variant: "text", className: "sia-table__toolbar-icon", icon: /* @__PURE__ */ jsx20(Icon, { name: "settings", size: 16 }), "aria-label": "\u6253\u5F00\u5217\u8BBE\u7F6E", title: "\u5217\u8BBE\u7F6E", onClick: () => context.setState((state) => ({ ...state, open: true })) }),
+    renderToolbarEnd: options.showButton === false ? void 0 : (context) => {
+      const exportApi = () => context.getPluginApi("export") ?? createExportPlugin().getApi({ ...context, state: void 0, setState: () => {
+      } });
+      const customItems = (options.menuItems ?? []).filter((item) => !(item.hidden === true || typeof item.hidden === "function" && item.hidden(context)));
+      const items = [
+        ...options.showExport === false ? [] : [
+          { key: "builtin:export", label: "\u8868\u683C\u5BFC\u51FA", icon: /* @__PURE__ */ jsx20(Icon, { name: "download", size: 18 }), disabled: exportApi().getRows().length === 0 },
+          { key: "builtin:divider", type: "divider" }
+        ],
+        { key: "builtin:columns", label: "\u5217\u8BBE\u7F6E", icon: /* @__PURE__ */ jsx20(Icon, { name: "settings", size: 18 }) },
+        ...customItems.map((item) => ({
+          key: "custom:" + item.key,
+          label: item.label,
+          icon: item.icon,
+          danger: item.danger,
+          disabled: item.disabled === true || typeof item.disabled === "function" && item.disabled(context)
+        }))
+      ];
+      return /* @__PURE__ */ jsx20(Dropdown, { trigger: ["hover", "click"], placement: "bottomRight", popupClassName: "sia-table__settings-dropdown", menu: { items, onClick: ({ key }) => {
+        if (key === "builtin:export") void exportApi().download();
+        else if (key === "builtin:columns") context.setState((state) => ({ ...state, open: true }));
+        else void customItems.find((item) => "custom:" + item.key === key)?.onClick?.(context);
+      } }, children: /* @__PURE__ */ jsx20(Button, { size: "small", variant: "text", className: "sia-table__toolbar-icon", icon: /* @__PURE__ */ jsx20(Icon, { name: "settings", size: 16 }), "aria-label": "\u8868\u683C\u8BBE\u7F6E" }) });
+    },
     renderOverlay: (context) => /* @__PURE__ */ jsx20(ColumnSettingPanel, { open: context.state.open, items: currentItems(context), columns: context.baseColumns, onClose: () => context.setState((state) => ({ ...state, open: false })), onApply: (items) => apply(items, context) }),
     getApi: (context) => ({ open: () => context.setState((state) => ({ ...state, open: true })), close: () => context.setState((state) => ({ ...state, open: false })), getSettings: () => currentItems(context), apply: (items) => apply(items, context) })
   };
@@ -6017,6 +6120,7 @@ function TableInner(props, ref) {
     tableHeight,
     size = "medium",
     bordered = true,
+    toolbarBordered = false,
     striped = true,
     virtual,
     virtualThreshold = 100,
@@ -6036,6 +6140,7 @@ function TableInner(props, ref) {
   const rootRef = useRef14(null);
   const scrollRef = useRef14(null);
   const tableRef = useRef14(null);
+  useScrollbarProximity();
   const scrollbarDragRef = useRef14(null);
   const [internalLoading, setInternalLoading] = useState17(false);
   const [scrollTop, setScrollTop] = useState17(0);
@@ -6116,7 +6221,7 @@ function TableInner(props, ref) {
   });
   pluginApisRef.current = nextApis;
   contextsRef.current = contexts;
-  useEffect12(() => {
+  useEffect13(() => {
     const activePlugins2 = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
     for (const [pluginId, mounted] of mountedPluginsRef.current) {
       if (activePlugins2.get(pluginId) === mounted.plugin) continue;
@@ -6128,7 +6233,7 @@ function TableInner(props, ref) {
       mountedPluginsRef.current.set(plugin.id, { plugin, cleanup: plugin.onMount(contextsRef.current.get(plugin.id)) });
     }
   }, [sortedPlugins]);
-  useEffect12(() => () => {
+  useEffect13(() => () => {
     for (const mounted of mountedPluginsRef.current.values()) mounted.cleanup?.();
     mountedPluginsRef.current.clear();
   }, []);
@@ -6140,8 +6245,10 @@ function TableInner(props, ref) {
     if (element.scrollLeft > maxLeft) element.scrollLeft = maxLeft > 1 ? maxLeft : 0;
     const logicalScrollLeft = Math.min(element.scrollLeft, maxLeft);
     const maxTop = Math.max(0, element.scrollHeight - element.clientHeight);
-    const horizontalTrack = Math.max(0, element.clientWidth - 8);
-    const verticalTrack = Math.max(0, element.clientHeight - 8);
+    root.dataset.overflowX = String(maxLeft > 1);
+    root.dataset.overflowY = String(maxTop > 1);
+    const horizontalTrack = root.querySelector(".sia-table__scrollbar--horizontal")?.clientWidth ?? 0;
+    const verticalTrack = root.querySelector(".sia-table__scrollbar--vertical")?.clientHeight ?? 0;
     const horizontalThumb = maxLeft > 1 ? Math.min(horizontalTrack, Math.max(36, horizontalTrack * element.clientWidth / horizontalContentWidth)) : 0;
     const verticalThumb = maxTop > 1 ? Math.min(verticalTrack, Math.max(36, verticalTrack * element.clientHeight / element.scrollHeight)) : 0;
     const horizontalPosition = maxLeft > 0 ? logicalScrollLeft / maxLeft * Math.max(0, horizontalTrack - horizontalThumb) : 0;
@@ -6166,7 +6273,7 @@ function TableInner(props, ref) {
     root.style.setProperty("--sia-table-scrollbar-y-size", `${verticalThumb}px`);
     root.style.setProperty("--sia-table-scrollbar-y-position", `${verticalPosition}px`);
   }, []);
-  useEffect12(() => {
+  useEffect13(() => {
     const element = scrollRef.current;
     if (!element || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(() => {
@@ -6179,13 +6286,13 @@ function TableInner(props, ref) {
     updateScrollMetrics();
     return () => observer.disconnect();
   }, [updateScrollMetrics]);
-  useEffect12(() => {
+  useEffect13(() => {
     updateScrollMetrics();
   });
   const orderedColumns = useMemo9(() => sortTableColumnsByFixed(pipeline.columns), [pipeline.columns]);
   const leafColumns = useMemo9(() => flattenTableColumns(orderedColumns), [orderedColumns]);
   const headerRows = useMemo9(() => buildHeaderRows(orderedColumns), [orderedColumns]);
-  useEffect12(() => {
+  useEffect13(() => {
     const autoWidthColumns = leafColumns.filter((column) => column.autoWidth && resizedWidths[column.key] === void 0);
     const root = rootRef.current;
     if (!root || autoWidthColumns.length === 0) return;
@@ -6282,16 +6389,26 @@ function TableInner(props, ref) {
     if (shouldVirtualize) setScrollTop(element.scrollTop);
     updateScrollMetrics();
   }, [shouldVirtualize, updateScrollMetrics]);
-  const handleScrollbarPointerDown = useCallback2((axis, event) => {
+  const handleScrollbarPointerDown = useCallback2((axis, event, track = event.currentTarget) => {
     const element = scrollRef.current;
-    const track = event.currentTarget.parentElement;
-    if (!element || !track) return;
+    const thumb = track.firstElementChild;
+    if (!element || !thumb || event.button !== 0) return;
     event.preventDefault();
     event.stopPropagation();
-    event.currentTarget.setPointerCapture(event.pointerId);
+    track.setPointerCapture(event.pointerId);
     const trackLength = axis === "x" ? track.clientWidth : track.clientHeight;
-    const thumbLength = axis === "x" ? event.currentTarget.offsetWidth : event.currentTarget.offsetHeight;
+    const thumbLength = axis === "x" ? thumb.offsetWidth : thumb.offsetHeight;
     const maxScroll = axis === "x" ? getTableHorizontalMetrics(element, tableRef.current).maxLeft : element.scrollHeight - element.clientHeight;
+    const thumbRect = thumb.getBoundingClientRect();
+    const coordinate = axis === "x" ? event.clientX : event.clientY;
+    const thumbStart = axis === "x" ? thumbRect.left : thumbRect.top;
+    if (coordinate < thumbStart || coordinate > thumbStart + thumbLength) {
+      const trackRect = track.getBoundingClientRect();
+      const trackStart = axis === "x" ? trackRect.left : trackRect.top;
+      const ratio = Math.max(0, Math.min(1, (coordinate - trackStart - thumbLength / 2) / Math.max(1, trackLength - thumbLength)));
+      if (axis === "x") element.scrollLeft = ratio * maxScroll;
+      else element.scrollTop = ratio * maxScroll;
+    }
     scrollbarDragRef.current = {
       axis,
       pointerId: event.pointerId,
@@ -6384,6 +6501,16 @@ function TableInner(props, ref) {
       };
     }, {});
   }
+  function scrollbarAtPoint(event) {
+    const tracks = rootRef.current?.querySelectorAll(".sia-table__scrollbar");
+    for (const track of tracks ?? []) {
+      if (track.closest(".sia-table") !== rootRef.current) continue;
+      const rect = track.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0 && event.clientX >= rect.left && event.clientX < rect.right && event.clientY >= rect.top && event.clientY < rect.bottom) {
+        return { track, axis: track.classList.contains("sia-table__scrollbar--vertical") ? "y" : "x" };
+      }
+    }
+  }
   function renderSummaryRow(summary) {
     let labelRendered = false;
     return /* @__PURE__ */ jsx21("tr", { className: `sia-table__summary-row ${summary.className ?? ""}`.trim(), children: leafColumns.map((column) => {
@@ -6399,13 +6526,51 @@ function TableInner(props, ref) {
     "div",
     {
       ref: rootRef,
-      className: `sia-table sia-table--${size}${bordered ? " sia-table--bordered" : ""} ${className}`.trim(),
+      className: `sia-table sia-table--${size}${bordered ? " sia-table--bordered" : ""}${hasToolbar && !toolbarBordered ? " sia-table--borderless-toolbar" : ""} ${className}`.trim(),
       style: rootStyle,
       "data-has-fixed-left": left > 0,
       "data-has-fixed-right": right > 0,
       "data-scrolled-left": "false",
       "data-scrolled-right": "true",
       ...htmlProps,
+      onPointerDownCapture: (event) => {
+        htmlProps.onPointerDownCapture?.(event);
+        if (event.defaultPrevented || loading || internalLoading) return;
+        const hit = scrollbarAtPoint(event);
+        if (hit) handleScrollbarPointerDown(hit.axis, event, hit.track);
+      },
+      onPointerMoveCapture: (event) => {
+        htmlProps.onPointerMoveCapture?.(event);
+        const hit = scrollbarAtPoint(event);
+        rootRef.current?.querySelectorAll(".sia-table__scrollbar").forEach((track) => {
+          const hovered = track === hit?.track;
+          if (hovered !== track.hasAttribute("data-pointer-hover")) track.toggleAttribute("data-pointer-hover", hovered);
+        });
+        if (hit || scrollbarDragRef.current) {
+          handleScrollbarPointerMove(event);
+          event.stopPropagation();
+        }
+      },
+      onPointerLeave: (event) => {
+        htmlProps.onPointerLeave?.(event);
+        rootRef.current?.querySelectorAll("[data-pointer-hover]").forEach((track) => track.removeAttribute("data-pointer-hover"));
+      },
+      onClickCapture: (event) => {
+        if (scrollbarAtPoint(event)) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        htmlProps.onClickCapture?.(event);
+      },
+      onDoubleClickCapture: (event) => {
+        if (scrollbarAtPoint(event)) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        htmlProps.onDoubleClickCapture?.(event);
+      },
       children: [
         hasToolbar ? /* @__PURE__ */ jsxs20("div", { className: "sia-table__toolbar", children: [
           /* @__PURE__ */ jsx21("div", { children: toolbarStart }),
@@ -6498,26 +6663,34 @@ function TableInner(props, ref) {
             summaries.length > 0 ? /* @__PURE__ */ jsx21("tfoot", { className: "sia-table__summary", children: summaries.map(renderSummaryRow) }) : null
           ] }) }),
           pipeline.rows.length === 0 ? /* @__PURE__ */ jsx21("div", { className: "sia-table__empty", role: "status", children: emptyText }) : null,
-          /* @__PURE__ */ jsx21("div", { className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--horizontal", "aria-hidden": "true", children: /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx21(
             "div",
             {
-              className: "sia-table__scrollbar-thumb",
+              className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--horizontal",
+              "aria-hidden": "true",
               onPointerDown: (event) => handleScrollbarPointerDown("x", event),
+              onClick: (event) => event.stopPropagation(),
+              onDoubleClick: (event) => event.stopPropagation(),
               onPointerMove: handleScrollbarPointerMove,
               onPointerUp: handleScrollbarPointerEnd,
-              onPointerCancel: handleScrollbarPointerEnd
+              onPointerCancel: handleScrollbarPointerEnd,
+              children: /* @__PURE__ */ jsx21("div", { className: "sia-table__scrollbar-thumb" })
             }
-          ) }),
-          /* @__PURE__ */ jsx21("div", { className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--vertical", "aria-hidden": "true", children: /* @__PURE__ */ jsx21(
+          ),
+          /* @__PURE__ */ jsx21(
             "div",
             {
-              className: "sia-table__scrollbar-thumb",
+              className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--vertical",
+              "aria-hidden": "true",
               onPointerDown: (event) => handleScrollbarPointerDown("y", event),
+              onClick: (event) => event.stopPropagation(),
+              onDoubleClick: (event) => event.stopPropagation(),
               onPointerMove: handleScrollbarPointerMove,
               onPointerUp: handleScrollbarPointerEnd,
-              onPointerCancel: handleScrollbarPointerEnd
+              onPointerCancel: handleScrollbarPointerEnd,
+              children: /* @__PURE__ */ jsx21("div", { className: "sia-table__scrollbar-thumb" })
             }
-          ) })
+          )
         ] }),
         footers.length > 0 ? /* @__PURE__ */ jsx21("div", { className: "sia-table__footer", children: footers }) : null,
         loading || internalLoading ? /* @__PURE__ */ jsxs20("div", { className: "sia-table__loading", role: "status", children: [
@@ -6571,7 +6744,7 @@ var ThemeSwitch = forwardRef6(function ThemeSwitch2({
 });
 
 // src/components/FloatingScrollbarProvider.tsx
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect14 } from "react";
 var scrollableOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay"]);
 var clippingOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay", "hidden", "clip"]);
 function isRootScroller(target) {
@@ -6634,7 +6807,8 @@ function createTrack(axis) {
   return { track, thumb };
 }
 function FloatingScrollbarProvider({ disabled = false }) {
-  useEffect13(() => {
+  useScrollbarProximity();
+  useEffect14(() => {
     if (disabled) return;
     const layer = document.createElement("div");
     layer.className = "sia-floating-scrollbar-layer";
@@ -6664,7 +6838,7 @@ function FloatingScrollbarProvider({ disabled = false }) {
       const hasHorizontal = canScroll(target, "horizontal");
       const hasVertical = canScroll(target, "vertical");
       const rect = visibleRect(target);
-      const thickness = 8;
+      const thickness = 10;
       horizontalTrack.hidden = !hasHorizontal || rect.width <= thickness || rect.height <= 0;
       verticalTrack.hidden = !hasVertical || rect.height <= thickness || rect.width <= 0;
       if (!horizontalTrack.hidden) {
@@ -6903,7 +7077,7 @@ function applySiaTheme(mode, target = document.documentElement) {
 }
 
 // src/components/SelectionPanel.tsx
-import { useEffect as useEffect14, useId as useId7, useMemo as useMemo10, useRef as useRef15, useState as useState18 } from "react";
+import { useEffect as useEffect15, useId as useId7, useMemo as useMemo10, useRef as useRef15, useState as useState18 } from "react";
 import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 function SelectionPanel({
   options,
@@ -6964,7 +7138,7 @@ function SelectionPanel({
   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");
-  useEffect14(() => {
+  useEffect15(() => {
     setScrollTop(0);
     if (listRef.current) listRef.current.scrollTop = 0;
     setActive(void 0);
@@ -7074,7 +7248,7 @@ function SelectionPanel({
 }
 
 // src/components/InputSelect.tsx
-import { forwardRef as forwardRef7, useEffect as useEffect15, useRef as useRef16, useState as useState19 } from "react";
+import { forwardRef as forwardRef7, useEffect as useEffect16, useRef as useRef16, useState as useState19 } from "react";
 import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 var InputSelect = forwardRef7(function InputSelect2({
   options,
@@ -7106,7 +7280,7 @@ var InputSelect = forwardRef7(function InputSelect2({
   const values = current == null ? [] : Array.isArray(current) ? current : [current];
   const text = values.map((item) => displayField === "label" ? String(options.find((option) => option.optionType !== "divider" && option.value === item)?.label ?? item) : String(item)).join(",");
   const [draft, setDraft] = useState19(text);
-  useEffect15(() => {
+  useEffect16(() => {
     setDraft(text);
   }, [text, current]);
   const [open, setOpen] = useState19(false);
@@ -7136,7 +7310,7 @@ var InputSelect = forwardRef7(function InputSelect2({
       inputRef.current?.focus();
     }
   }
-  useEffect15(() => {
+  useEffect16(() => {
     if (!open) return;
     const outside = (event) => {
       if (!rootRef.current?.contains(event.target) && !popupRef.current?.contains(event.target)) changeOpen(false);
@@ -7144,7 +7318,7 @@ var InputSelect = forwardRef7(function InputSelect2({
     document.addEventListener("pointerdown", outside);
     return () => document.removeEventListener("pointerdown", outside);
   }, [open, onOpenChange]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (disabled || loading) {
       changeOpen(false);
       setModalOpen(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",