@sia.soul/sia-react-ui 0.1.10 → 0.1.12

package/dist/index.js

@@ -79,7 +79,7 @@ import {
   Watermark,
   message,
   notification
-} from "./chunk-6HP6IIT4.js";
+} from "./chunk-MOOMDRAN.js";
 import {
   TextArea
 } from "./chunk-WHARTF2I.js";
@@ -94,7 +94,7 @@ import {
   DatePicker,
   SelectDateRange,
   TimePanel
-} from "./chunk-T2X6WK6Z.js";
+} from "./chunk-RLTG3IK7.js";
 import {
   Checkbox,
   Modal,
@@ -107,7 +107,7 @@ import {
   Tooltip,
   Tree,
   useOverlayLifecycle
-} from "./chunk-SGJLZN23.js";
+} from "./chunk-BUMS62NO.js";
 import {
   Dropdown,
   FILLED_ICON_NAMES,
@@ -829,7 +829,7 @@ function SplitterRoot({
 var Splitter = Object.assign(SplitterRoot, { Panel: SplitterPanel });
 
 // src/components/ToolPanel.tsx
-import { useState as useState5 } from "react";
+import { useId, useLayoutEffect, useRef as useRef3, useState as useState5 } from "react";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function clamp2(value, min, max) {
   return Math.min(max, Math.max(min, value));
@@ -837,6 +837,10 @@ function clamp2(value, min, max) {
 function ToolPanel({
   title,
   icon,
+  items,
+  activeKey,
+  defaultActiveKey,
+  onActiveKeyChange,
   placement = "left",
   open,
   defaultOpen = true,
@@ -851,9 +855,56 @@ function ToolPanel({
   children,
   ...props
 }) {
+  const panelId = useId();
+  const [internalActiveKey, setInternalActiveKey] = useState5(defaultActiveKey);
   const [internalOpen, setInternalOpen] = useState5(defaultOpen);
   const [size, setSize] = useState5(() => clamp2(defaultSize, minSize, maxSize));
-  const isOpen = open ?? internalOpen;
+  const panels = items ?? [{ key: "single", title, icon, children }];
+  const requestedKey = activeKey ?? internalActiveKey;
+  const activePanel = panels.find((item) => item.key === requestedKey && !item.disabled) ?? panels.find((item) => !item.disabled);
+  const isOpen = (open ?? internalOpen) && Boolean(activePanel);
+  const railRef = useRef3(null);
+  const indicatorRef = useRef3(null);
+  useLayoutEffect(() => {
+    const rail2 = railRef.current;
+    const indicator = indicatorRef.current;
+    if (!rail2 || !indicator) return;
+    function updateIndicator() {
+      if (!rail2 || !indicator) return;
+      const active = rail2.querySelector(".sia-tool-panel__activity.is-active");
+      if (!active) {
+        indicator.style.visibility = "hidden";
+        delete indicator.dataset.ready;
+        return;
+      }
+      const railRect = rail2.getBoundingClientRect();
+      const rect = active.getBoundingClientRect();
+      const x = rect.left - railRect.left - rail2.clientLeft + rail2.scrollLeft + (placement === "left" ? rect.width - 3 : 0);
+      const y = rect.top - railRect.top - rail2.clientTop + rail2.scrollTop;
+      indicator.style.transform = `translate(${x}px, ${y}px)`;
+      indicator.style.height = `${rect.height}px`;
+      indicator.style.visibility = "visible";
+      if (!indicator.dataset.ready) {
+        indicator.getBoundingClientRect();
+        indicator.dataset.ready = "true";
+      }
+    }
+    updateIndicator();
+    const observer = new ResizeObserver(updateIndicator);
+    observer.observe(rail2);
+    rail2.querySelectorAll(".sia-tool-panel__activity").forEach((item) => observer.observe(item));
+    return () => observer.disconnect();
+  }, [isOpen, activePanel?.key, items, title, icon, placement]);
+  function activatePanel(item) {
+    if (item.disabled) return;
+    if (item.key === activePanel?.key) {
+      setOpen(!isOpen);
+    } else {
+      if (activeKey === void 0) setInternalActiveKey(item.key);
+      onActiveKeyChange?.(item.key);
+      if (!isOpen) setOpen(true);
+    }
+  }
   function setOpen(nextOpen) {
     if (open === void 0) setInternalOpen(nextOpen);
     onOpenChange?.(nextOpen);
@@ -892,23 +943,45 @@ function ToolPanel({
     const direction = event.key === "ArrowRight" ? 1 : -1;
     resize(size + (placement === "left" ? direction : -direction) * 12, true);
   }
-  const titleText = typeof title === "string" ? title : "\u5DE5\u5177";
-  const rail = /* @__PURE__ */ jsx6("div", { className: "sia-tool-panel__rail", children: /* @__PURE__ */ jsxs6(
-    "button",
+  const titleText = typeof activePanel?.title === "string" ? activePanel.title : "\u5DE5\u5177";
+  const rail = /* @__PURE__ */ jsxs6("div", { ref: railRef, className: "sia-tool-panel__rail", children: [
+    /* @__PURE__ */ jsx6("span", { ref: indicatorRef, className: "sia-tool-panel__indicator", "aria-hidden": "true" }),
+    panels.map((item, index) => {
+      const expanded = isOpen && item.key === activePanel?.key;
+      const label = typeof item.title === "string" ? item.title : "\u5DE5\u5177";
+      return /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          id: `${panelId}-activity-${index}`,
+          type: "button",
+          className: `sia-tool-panel__activity${expanded ? " is-active" : ""}`,
+          "aria-expanded": expanded,
+          "aria-controls": `${panelId}-content-${index}`,
+          "aria-label": `${expanded ? "\u6536\u8D77" : "\u5C55\u5F00"}${label}\u9762\u677F`,
+          title: typeof item.title === "string" ? item.title : void 0,
+          disabled: item.disabled,
+          onClick: () => activatePanel(item),
+          children: [
+            item.icon ? /* @__PURE__ */ jsx6("span", { className: "sia-tool-panel__activity-icon", children: item.icon }) : null,
+            /* @__PURE__ */ jsx6("span", { className: "sia-tool-panel__activity-label", children: item.title })
+          ]
+        },
+        item.key
+      );
+    })
+  ] });
+  const content = /* @__PURE__ */ jsx6("div", { className: "sia-tool-panel__content", hidden: !isOpen, "aria-hidden": !isOpen, children: panels.map((item, index) => /* @__PURE__ */ jsx6(
+    "div",
     {
-      type: "button",
-      className: `sia-tool-panel__activity${isOpen ? " is-active" : ""}`,
-      "aria-expanded": isOpen,
-      "aria-label": `${isOpen ? "\u6536\u8D77" : "\u5C55\u5F00"}${titleText}\u9762\u677F`,
-      title: typeof title === "string" ? title : void 0,
-      onClick: () => setOpen(!isOpen),
-      children: [
-        icon ? /* @__PURE__ */ jsx6("span", { className: "sia-tool-panel__activity-icon", children: icon }) : null,
-        /* @__PURE__ */ jsx6("span", { className: "sia-tool-panel__activity-label", children: title })
-      ]
-    }
-  ) });
-  const content = /* @__PURE__ */ jsx6("div", { className: "sia-tool-panel__content", hidden: !isOpen, "aria-hidden": !isOpen, children });
+      id: `${panelId}-content-${index}`,
+      className: "sia-tool-panel__pane",
+      role: "region",
+      "aria-labelledby": `${panelId}-activity-${index}`,
+      hidden: !isOpen || item.key !== activePanel?.key,
+      children: item.children
+    },
+    item.key
+  )) });
   const resizeHandle = /* @__PURE__ */ jsx6(
     "div",
     {
@@ -1109,7 +1182,7 @@ function WindowTitleBar({
 }
 
 // src/components/Drawer.tsx
-import { createContext, forwardRef, useCallback, useContext, useEffect as useEffect2, useId, useMemo as useMemo3, useRef as useRef3, useState as useState6 } from "react";
+import { createContext, forwardRef, useCallback, useContext, useEffect as useEffect2, useId as useId2, useMemo as useMemo3, useRef as useRef4, useState as useState6 } from "react";
 import { createRoot } from "react-dom/client";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var drawerHandles = /* @__PURE__ */ new Set();
@@ -1145,12 +1218,12 @@ var DrawerRoot = forwardRef(function Drawer({
   style,
   ...props
 }, forwardedRef) {
-  const localRef = useRef3(null);
-  const titleId = useId();
-  const drawerId = useId();
+  const localRef = useRef4(null);
+  const titleId = useId2();
+  const drawerId = useId2();
   const parentStack = useContext(DrawerStackContext);
-  const afterOpenRef = useRef3(afterOpen);
-  const afterCloseRef = useRef3(afterClose);
+  const afterOpenRef = useRef4(afterOpen);
+  const afterCloseRef = useRef4(afterClose);
   afterOpenRef.current = afterOpen;
   afterCloseRef.current = afterClose;
   const [rendered, setRendered] = useState6(open);
@@ -1310,7 +1383,7 @@ var Drawer2 = Object.assign(DrawerRoot, {
 });
 
 // src/components/Form.tsx
-import { Children as Children3, cloneElement as cloneElement2, createContext as createContext2, forwardRef as forwardRef2, isValidElement as isValidElement2, useContext as useContext2, useEffect as useEffect3, useId as useId2, useMemo as useMemo4, useRef as useRef4, useSyncExternalStore } from "react";
+import { Children as Children3, cloneElement as cloneElement2, createContext as createContext2, forwardRef as forwardRef2, isValidElement as isValidElement2, useContext as useContext2, useEffect as useEffect3, useId as useId3, useMemo as useMemo4, useRef as useRef5, useSyncExternalStore } from "react";
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var Switch = forwardRef2(function Switch2({
   label,
@@ -1531,7 +1604,7 @@ var FormStore = class {
 };
 var FormContext = createContext2(null);
 function useForm(form) {
-  const ref = useRef4(form ?? new FormStore());
+  const ref = useRef5(form ?? new FormStore());
   return [ref.current];
 }
 function FormRoot({
@@ -1589,8 +1662,8 @@ function FormItem({
   className = ""
 }) {
   const form = useContext2(FormContext);
-  const id = useId2();
-  const itemRef = useRef4(null);
+  const id = useId3();
+  const itemRef = useRef5(null);
   if (!form) throw new Error("Form.Item \u5FC5\u987B\u5728 Form \u5185\u4F7F\u7528");
   useSyncExternalStore(form.subscribe, form.getSnapshot, form.getSnapshot);
   const path = name === void 0 ? void 0 : pathArray(name);
@@ -1710,12 +1783,12 @@ var Form = Object.assign(FormRoot, {
 });
 
 // src/components/Radio.tsx
-import { createContext as createContext3, forwardRef as forwardRef3, useContext as useContext3, useId as useId3, useMemo as useMemo5 } from "react";
+import { createContext as createContext3, forwardRef as forwardRef3, useContext as useContext3, useId as useId4, useMemo as useMemo5 } from "react";
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var RadioContext = createContext3(null);
 var RadioRoot = forwardRef3(function Radio({ value, children, disabled, checked, defaultChecked, button = false, className = "", onChange, ...props }, ref) {
   const group = useContext3(RadioContext);
-  const fallbackId = useId3();
+  const fallbackId = useId4();
   const grouped = group !== null;
   const currentChecked = grouped ? group.value === value : checked;
   return /* @__PURE__ */ jsxs10("label", { className: `sia-radio${button ? " sia-radio--button" : ""}${button && group?.buttonStyle === "solid" ? " sia-radio--solid" : ""}${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
@@ -1757,7 +1830,7 @@ function RadioGroup({
   children,
   onChange
 }) {
-  const fallbackName = useId3();
+  const fallbackName = useId4();
   const [currentValue, setValue2] = useControllableState({
     value,
     defaultValue,
@@ -1902,7 +1975,7 @@ function Slider({
 }
 
 // src/components/ColorPicker.tsx
-import { useEffect as useEffect4, useRef as useRef5, useState as useState8 } from "react";
+import { useEffect as useEffect4, useRef as useRef6, useState as useState8 } from "react";
 import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var DEFAULT_MODES = ["solid", "gradient"];
 var gradientStopSeed = 0;
@@ -1991,9 +2064,9 @@ function ColorPicker({
   onClear,
   ...props
 }) {
-  const rootRef = useRef5(null);
-  const popupRef = useRef5(null);
-  const lastEmittedValue = useRef5();
+  const rootRef = useRef6(null);
+  const popupRef = useRef6(null);
+  const lastEmittedValue = useRef6();
   const initialGradient = parseGradient(value ?? defaultValue);
   const initialSolid = initialGradient?.stops[0]?.color ?? normalizeHex(value || defaultValue);
   const [open, setOpen] = useState8(false);
@@ -2216,7 +2289,7 @@ function ColorPicker({
 }
 
 // src/components/TimePicker.tsx
-import { useEffect as useEffect5, useId as useId4, useRef as useRef6, useState as useState9 } from "react";
+import { useEffect as useEffect5, useId as useId5, useRef as useRef7, useState as useState9 } from "react";
 import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function seconds(value) {
   const [h = 0, m = 0, s = 0] = value.split(":").map(Number);
@@ -2245,11 +2318,11 @@ function TimePicker({
   step,
   ...props
 }) {
-  const id = useId4();
-  const rootRef = useRef6(null);
-  const inputRef = useRef6(null);
-  const popupRef = useRef6(null);
-  const focusPanel = useRef6(false);
+  const id = useId5();
+  const rootRef = useRef7(null);
+  const inputRef = useRef7(null);
+  const popupRef = useRef7(null);
+  const focusPanel = useRef7(false);
   const [currentValue, setValue2] = useControllableState({ value, defaultValue, onChange });
   const [open, setOpen] = useState9(false);
   const [draft, setDraft] = useState9("00:00:00");
@@ -2388,7 +2461,7 @@ function TimeRangePicker({ value, defaultValue = ["", ""], placeholder = ["\u5F0
 })(TimePicker || (TimePicker = {}));
 
 // src/components/TreeSelect.tsx
-import { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef7, useState as useState10 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef8, useState as useState10 } from "react";
 import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 function flattenTree(nodes, expanded, search, filter, depth = 0, parents = [], ancestorMatched = false) {
   const result = [];
@@ -2450,8 +2523,8 @@ function TreeSelect({
   onDeselect,
   ...props
 }) {
-  const rootRef = useRef7(null);
-  const popupRef = useRef7(null);
+  const rootRef = useRef8(null);
+  const popupRef = useRef8(null);
   const nodeIndex = useMemo6(() => {
     const index = /* @__PURE__ */ new Map();
     const visit = (nodes) => nodes.forEach((node) => {
@@ -2706,7 +2779,7 @@ function buildFlatTree(items, options = {}) {
 }
 
 // src/components/Editor.tsx
-import { useEffect as useEffect7, useId as useId5, useRef as useRef8, useState as useState11 } from "react";
+import { useEffect as useEffect7, useId as useId6, useRef as useRef9, useState as useState11 } from "react";
 import EditorWorker from "monaco-editor/editor/editor.worker.js?worker";
 
 // src/components/jsonLanguage.ts
@@ -3194,28 +3267,28 @@ function Editor({
   ariaLabel = "\u4EE3\u7801\u7F16\u8F91\u5668",
   loadingText = "\u6B63\u5728\u52A0\u8F7D\u7F16\u8F91\u5668\u2026"
 }) {
-  const generatedId = useId5();
-  const containerRef = useRef8(null);
-  const rangeHighlightRef = useRef8(null);
-  const editorRef = useRef8(null);
-  const modelRef = useRef8(null);
-  const apiRef = useRef8(null);
-  const applyingControlledValueRef = useRef8(false);
-  const updateHighlightRef = useRef8(() => void 0);
-  const changeHandlerRef = useRef8(onChange);
-  const readyHandlerRef = useRef8(onReady);
-  const selectionHandlerRef = useRef8(onSelectionChange);
-  const keyDownHandlerRef = useRef8(onKeyDown);
-  const highlightRangeRef = useRef8(highlightRange);
-  const markersRef = useRef8(markers);
-  const contextMenuItemsRef = useRef8(contextMenuItems);
-  const completionProviderRef = useRef8(completionProvider);
-  const refreshSuggestionOnSpaceRef = useRef8(refreshSuggestionOnSpace);
-  const initialValueRef = useRef8(value);
-  const initialLanguageRef = useRef8(language);
-  const initialPathRef = useRef8(path);
-  const initialThemeRef = useRef8(theme);
-  const initialOptionsRef = useRef8(options);
+  const generatedId = useId6();
+  const containerRef = useRef9(null);
+  const rangeHighlightRef = useRef9(null);
+  const editorRef = useRef9(null);
+  const modelRef = useRef9(null);
+  const apiRef = useRef9(null);
+  const applyingControlledValueRef = useRef9(false);
+  const updateHighlightRef = useRef9(() => void 0);
+  const changeHandlerRef = useRef9(onChange);
+  const readyHandlerRef = useRef9(onReady);
+  const selectionHandlerRef = useRef9(onSelectionChange);
+  const keyDownHandlerRef = useRef9(onKeyDown);
+  const highlightRangeRef = useRef9(highlightRange);
+  const markersRef = useRef9(markers);
+  const contextMenuItemsRef = useRef9(contextMenuItems);
+  const completionProviderRef = useRef9(completionProvider);
+  const refreshSuggestionOnSpaceRef = useRef9(refreshSuggestionOnSpace);
+  const initialValueRef = useRef9(value);
+  const initialLanguageRef = useRef9(language);
+  const initialPathRef = useRef9(path);
+  const initialThemeRef = useRef9(theme);
+  const initialOptionsRef = useRef9(options);
   const [loading, setLoading] = useState11(true);
   const [, setSelectionVersion] = useState11(0);
   initialValueRef.current = value;
@@ -3753,12 +3826,12 @@ function Editor({
 }
 
 // src/components/Markdown.tsx
-import { useEffect as useEffect8, useMemo as useMemo7, useRef as useRef9, useState as useState12 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo7, useRef as useRef10, useState as useState12 } from "react";
 import DOMPurify from "dompurify";
 import { marked } from "marked";
 import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 function Markdown({ content, emptyText = "\u6682\u65E0 Markdown \u5185\u5BB9", resolveImageSrc, imagePreview = true, className = "", onClick, onKeyDown, ...props }) {
-  const rootRef = useRef9(null);
+  const rootRef = useRef10(null);
   const [previewImage, setPreviewImage] = useState12(null);
   const html = useMemo7(() => {
     const rendered = marked.parse(content, { breaks: true, gfm: true });
@@ -3833,7 +3906,7 @@ function Markdown({ content, emptyText = "\u6682\u65E0 Markdown \u5185\u5BB9", r
 }
 
 // src/components/InputNumber.tsx
-import { forwardRef as forwardRef4, useEffect as useEffect9, useId as useId6, useRef as useRef10, useState as useState13 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect9, useId as useId7, useRef as useRef11, useState as useState13 } from "react";
 import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
 function formatValue(value, precision) {
   if (value === null || !Number.isFinite(value)) return "";
@@ -3862,9 +3935,9 @@ var InputNumber = forwardRef4(function InputNumber2({
   onKeyDown,
   ...props
 }, forwardedRef) {
-  const fallbackId = useId6();
+  const fallbackId = useId7();
   const inputId = id ?? fallbackId;
-  const localRef = useRef10(null);
+  const localRef = useRef11(null);
   const [currentValue, setCurrentValue] = useControllableState({ value, defaultValue, onChange });
   const [text, setText] = useState13(() => formatValue(currentValue, precision));
   useEffect9(() => {
@@ -3959,7 +4032,7 @@ var InputNumber = forwardRef4(function InputNumber2({
 });
 
 // src/components/Treemap.tsx
-import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef11, useState as useState14 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef12, useState as useState14 } from "react";
 import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
 function positiveValue(value) {
   return Number.isFinite(value) && value > 0 ? value : 1;
@@ -4246,7 +4319,7 @@ function Treemap({
   style,
   ...props
 }) {
-  const containerRef = useRef11(null);
+  const containerRef = useRef12(null);
   const [size, setSize] = useState14({ width: 0, height: 0 });
   const [internalExpandedKeys, setInternalExpandedKeys] = useState14(() => [...defaultExpandedKeys]);
   const [internalFocusedKey, setInternalFocusedKey] = useState14(defaultFocusedKey);
@@ -4460,13 +4533,13 @@ function useScrollbarProximity() {
 }
 
 // src/components/Table/TableCellContent.tsx
-import { useLayoutEffect, useRef as useRef12, useState as useState15 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef13, useState as useState15 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 function TableCellContent({ children, ellipsis, title }) {
-  const ref = useRef12(null);
+  const ref = useRef13(null);
   const [overflowing, setOverflowing] = useState15(false);
   const customContent = typeof children !== "string" && typeof children !== "number" && children != null;
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const element = ref.current;
     if (!element || !ellipsis || !customContent) return;
     const layouts = [];
@@ -4498,10 +4571,10 @@ function TableCellContent({ children, ellipsis, title }) {
 }
 
 // src/components/Table/Table.tsx
-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";
+import { Fragment as Fragment7, forwardRef as forwardRef5, memo, useCallback as useCallback2, useEffect as useEffect13, useImperativeHandle, useMemo as useMemo9, useRef as useRef15, useState as useState17 } from "react";
 
 // src/components/Table/plugins.tsx
-import { isValidElement as isValidElement3, useEffect as useEffect12, useRef as useRef13, useState as useState16 } from "react";
+import { isValidElement as isValidElement3, useEffect as useEffect12, useRef as useRef14, useState as useState16 } from "react";
 
 // src/components/Table/utils.ts
 var AUTO_WIDTH_COLUMN_KEYS = /* @__PURE__ */ new Set(["action", "actions", "operation", "operations"]);
@@ -5518,11 +5591,11 @@ function EditableTableCell({
   const config = typeof editable === "object" ? editable : { type: "input" };
   const [editValue, setEditValue] = useState16(value);
   const [saving, setSaving] = useState16(false);
-  const inputRef = useRef13(null);
-  const editorRef = useRef13(null);
-  const editValueRef = useRef13(value);
-  const savingRef = useRef13(false);
-  const saveRef = useRef13(async () => {
+  const inputRef = useRef14(null);
+  const editorRef = useRef14(null);
+  const editValueRef = useRef14(value);
+  const savingRef = useRef14(false);
+  const saveRef = useRef14(async () => {
   });
   useEffect12(() => {
     if (!active) return;
@@ -5715,7 +5788,7 @@ function applyColumnSettingsToTree(columns, items) {
 }
 function ColumnSettingPanel({ open, items, columns, onClose, onApply }) {
   const [draft, setDraft] = useState16(items);
-  const dragIndex = useRef13(null);
+  const dragIndex = useRef14(null);
   useEffect12(() => {
     if (open) setDraft(items);
   }, [items, open]);
@@ -5829,11 +5902,21 @@ function createColumnSettingPlugin(options = {}) {
           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 }) => {
+      return /* @__PURE__ */ jsx20(Dropdown, { disabled: options.buttonProps?.disabled || options.buttonProps?.loading, 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" }) });
+      } }, children: /* @__PURE__ */ jsx20(
+        Button,
+        {
+          size: "small",
+          variant: "text",
+          icon: /* @__PURE__ */ jsx20(Icon, { name: "settings", size: 16 }),
+          "aria-label": "\u8868\u683C\u8BBE\u7F6E",
+          ...options.buttonProps,
+          className: `sia-table__settings-button${options.buttonProps?.children == null ? " sia-table__toolbar-icon" : ""} ${options.buttonProps?.className ?? ""}`.trim()
+        }
+      ) });
     },
     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) })
@@ -6156,11 +6239,11 @@ function TableInner(props, ref) {
     style,
     ...htmlProps
   } = props;
-  const rootRef = useRef14(null);
-  const scrollRef = useRef14(null);
-  const tableRef = useRef14(null);
+  const rootRef = useRef15(null);
+  const scrollRef = useRef15(null);
+  const tableRef = useRef15(null);
   useScrollbarProximity();
-  const scrollbarDragRef = useRef14(null);
+  const scrollbarDragRef = useRef15(null);
   const [internalLoading, setInternalLoading] = useState17(false);
   const [scrollTop, setScrollTop] = useState17(0);
   const [viewportHeight, setViewportHeight] = useState17(420);
@@ -6176,14 +6259,14 @@ function TableInner(props, ref) {
     return plugins;
   }, [builtInHighlightPlugin, builtInResizePlugin, providedPlugins, resizable]);
   const sortedPlugins = useMemo9(() => [...activePlugins].sort((a, b) => (a.order ?? 100) - (b.order ?? 100)), [activePlugins]);
-  const pluginsByIdRef = useRef14(/* @__PURE__ */ new Map());
+  const pluginsByIdRef = useRef15(/* @__PURE__ */ new Map());
   pluginsByIdRef.current = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
   const [pluginStates, setPluginStates] = useState17(() => Object.fromEntries(
     sortedPlugins.map((plugin) => [plugin.id, resolveInitialState(plugin)])
   ));
-  const pluginApisRef = useRef14({});
-  const contextsRef = useRef14(/* @__PURE__ */ new Map());
-  const mountedPluginsRef = useRef14(/* @__PURE__ */ new Map());
+  const pluginApisRef = useRef15({});
+  const contextsRef = useRef15(/* @__PURE__ */ new Map());
+  const mountedPluginsRef = useRef15(/* @__PURE__ */ new Map());
   const pipeline = { columns: baseColumns, rows: createTableRows(dataSource, getRowKey) };
   const nextApis = {};
   const contexts = /* @__PURE__ */ new Map();
@@ -7096,7 +7179,7 @@ function applySiaTheme(mode, target = document.documentElement) {
 }
 
 // src/components/InputSelect.tsx
-import { forwardRef as forwardRef7, useEffect as useEffect15, useRef as useRef15, useState as useState18 } from "react";
+import { forwardRef as forwardRef7, useEffect as useEffect15, useRef as useRef16, useState as useState18 } from "react";
 import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 var InputSelect = forwardRef7(function InputSelect2({
   options,
@@ -7136,9 +7219,9 @@ var InputSelect = forwardRef7(function InputSelect2({
   const [modalOpen, setModalOpen] = useState18(false);
   const [modalValues, setModalValues] = useState18([]);
   const [selectedOnly, setSelectedOnly] = useState18(false);
-  const rootRef = useRef15(null);
-  const popupRef = useRef15(null);
-  const inputRef = useRef15(null);
+  const rootRef = useRef16(null);
+  const popupRef = useRef16(null);
+  const inputRef = useRef16(null);
   const config = typeof enableModal === "object" ? enableModal : {};
   function changeOpen(next) {
     if (next && (disabled || loading)) return;

package/dist/select-date-range.cjs

@@ -2756,6 +2756,7 @@ var Select = (0, import_react14.forwardRef)(function Select2({
   optionHeight = showValue ? 54 : 34,
   disabled,
   className = "",
+  style,
   id,
   notFoundContent = "\u6682\u65E0\u6570\u636E",
   onKeyDown,
@@ -2986,7 +2987,7 @@ var Select = (0, import_react14.forwardRef)(function Select2({
     setModalValues([...modalValues.filter((value2) => !editable.has(value2)), ...modalEnabled.filter((option) => operation === "all" || operation === "invert" && !modalValues.includes(option.value)).map((option) => option.value)]);
   }
   const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasValue, active: open });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "button",
       {

package/dist/select-date-range.js

@@ -1,7 +1,7 @@
 import {
   SelectDateRange
-} from "./chunk-T2X6WK6Z.js";
-import "./chunk-SGJLZN23.js";
+} from "./chunk-RLTG3IK7.js";
+import "./chunk-BUMS62NO.js";
 import "./chunk-JJVD2ITI.js";
 import "./chunk-MBS2HXLZ.js";
 import "./chunk-EJDPRAU2.js";

package/package.json

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