@sia.soul/sia-react-ui 0.1.52 → 0.1.54

package/dist/index.css

@@ -2190,14 +2190,24 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   overflow: var(--sia-scroll-overflow, auto);
   padding: 10vh 16px 32px;
   color: var(--sia-color-text);
+  isolation: isolate;
+}
+.sia-modal-root::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
   background: rgb(0 0 0 / 45%);
-  animation: sia-modal-mask-in 200ms ease both;
+  animation: sia-modal-mask-in 220ms ease both;
+  will-change: opacity;
 }
 .sia-modal-root--centered {
   align-items: center;
   padding-block: 24px;
 }
 .sia-modal {
+  position: relative;
+  z-index: 1;
   width: min(var(--sia-modal-width), calc(100vw - 32px));
   overflow: hidden;
   background: var(--sia-color-surface);
@@ -2210,6 +2220,8 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 }
 .sia-modal-root[data-state=closing] {
   pointer-events: none;
+}
+.sia-modal-root[data-state=closing]::before {
   animation: sia-modal-mask-out 220ms ease both;
 }
 .sia-modal-root[data-state=closing] .sia-modal {
@@ -4164,6 +4176,56 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   align-items: center;
   min-width: 0;
 }
+.sia-table__cell--tree-lines {
+  padding-block: 0;
+}
+.sia-table__cell--tree-lines > .sia-table__cell-content {
+  position: absolute;
+  inset: 0 12px;
+}
+.sia-table__tree-cell--lines {
+  height: 100%;
+}
+.sia-table__tree-guide {
+  position: relative;
+  align-self: stretch;
+  flex: 0 0 18px;
+  width: 18px;
+}
+.sia-table__tree-guide--branch::before,
+.sia-table__tree-guide--continued::before {
+  position: absolute;
+  content: "";
+  left: 10px;
+  top: 0;
+  height: 50%;
+  border-left: 1px solid var(--sia-color-border);
+}
+.sia-table__tree-guide--continued::before {
+  height: 100%;
+}
+.sia-table__tree-guide--branch::after {
+  position: absolute;
+  content: "";
+  left: 10px;
+  right: 0;
+  top: 50%;
+  border-top: 1px solid var(--sia-color-border);
+}
+.sia-table__tree-node {
+  position: relative;
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 20px;
+}
+.sia-table__tree-stem {
+  position: absolute;
+  left: 10px;
+  top: calc(50% + 10px);
+  bottom: 0;
+  border-left: 1px solid var(--sia-color-border);
+}
 .sia-table__tree-toggle,
 .sia-table__tree-placeholder {
   display: inline-grid;
@@ -4401,12 +4463,18 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 }
 @keyframes sia-modal-mask-in {
   from {
-    background-color: rgb(0 0 0 / 0%);
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
   }
 }
 @keyframes sia-modal-mask-out {
+  from {
+    opacity: 1;
+  }
   to {
-    background-color: rgb(0 0 0 / 0%);
+    opacity: 0;
   }
 }
 @keyframes sia-modal-slide-in {
@@ -4554,7 +4622,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   .sia-button::after,
   .sia-icon--spin,
   .sia-icon--pulse,
-  .sia-modal-root,
+  .sia-modal-root::before,
   .sia-modal,
   .sia-drawer,
   .sia-drawer__mask,

package/dist/index.d.cts

@@ -2109,6 +2109,19 @@ interface TableProps<T extends Record<string, unknown> = Record<string, unknown>
     emptyText?: ReactNode;
     /** 高度；数值按像素处理，字符串可使用 CSS 尺寸。 */
     height?: number | string;
+    /**
+     * 自动填充从表格顶部到可视区域底部的剩余高度，包含工具栏和分页；true 使用当前窗口视口。
+     * 查询区尺寸、祖先布局、窗口尺寸及隐藏页签显示后自动重测。height / tableHeight 显式设置时优先。
+     * 默认关闭；不要同时使用依赖表格自身高度的容器或垂直居中布局。
+     */
+    fillRemaining?: boolean | {
+        /** 返回具有独立确定高度的容器，按其内边距内侧底边计算；默认使用窗口视口，返回 null 时等待容器就绪。 */
+        container?: () => HTMLElement | null;
+        /** 从可用高度中额外扣除的底部留白，单位 px，默认 0；不自动预留表格之后的兄弟内容。 */
+        bottomOffset?: number;
+        /** 最小总高度，单位 px，默认 0；超过可用空间时允许溢出，以保证最低可操作区域。 */
+        minHeight?: number;
+    };
     /** 表格滚动区域的高度。 */
     tableHeight?: number | string;
     /**
@@ -2574,6 +2587,8 @@ interface TableIndexPluginOptions {
 declare function createIndexPlugin<T extends Record<string, unknown>>(options?: TableIndexPluginOptions): TablePlugin<T, undefined>;
 /** TableTree的插件配置。 */
 interface TableTreePluginOptions<T> {
+    /** 显示树形层级连接线；仅在 ignoreChildrenColumn=false 时生效，默认 false。 */
+    showLine?: boolean;
     /** 行数据中存放子行的字段名。 */
     childrenColumnName?: string;
     /** 是否忽略数据内的子行字段。 */

package/dist/index.d.ts

@@ -2109,6 +2109,19 @@ interface TableProps<T extends Record<string, unknown> = Record<string, unknown>
     emptyText?: ReactNode;
     /** 高度；数值按像素处理，字符串可使用 CSS 尺寸。 */
     height?: number | string;
+    /**
+     * 自动填充从表格顶部到可视区域底部的剩余高度，包含工具栏和分页；true 使用当前窗口视口。
+     * 查询区尺寸、祖先布局、窗口尺寸及隐藏页签显示后自动重测。height / tableHeight 显式设置时优先。
+     * 默认关闭；不要同时使用依赖表格自身高度的容器或垂直居中布局。
+     */
+    fillRemaining?: boolean | {
+        /** 返回具有独立确定高度的容器，按其内边距内侧底边计算；默认使用窗口视口，返回 null 时等待容器就绪。 */
+        container?: () => HTMLElement | null;
+        /** 从可用高度中额外扣除的底部留白，单位 px，默认 0；不自动预留表格之后的兄弟内容。 */
+        bottomOffset?: number;
+        /** 最小总高度，单位 px，默认 0；超过可用空间时允许溢出，以保证最低可操作区域。 */
+        minHeight?: number;
+    };
     /** 表格滚动区域的高度。 */
     tableHeight?: number | string;
     /**
@@ -2574,6 +2587,8 @@ interface TableIndexPluginOptions {
 declare function createIndexPlugin<T extends Record<string, unknown>>(options?: TableIndexPluginOptions): TablePlugin<T, undefined>;
 /** TableTree的插件配置。 */
 interface TableTreePluginOptions<T> {
+    /** 显示树形层级连接线；仅在 ignoreChildrenColumn=false 时生效，默认 false。 */
+    showLine?: boolean;
     /** 行数据中存放子行的字段名。 */
     childrenColumnName?: string;
     /** 是否忽略数据内的子行字段。 */

package/dist/index.js

@@ -4751,8 +4751,86 @@ function TableCellContent({ children, ellipsis, title }) {
   return /* @__PURE__ */ jsx20("div", { ref, className: "sia-table__cell-content", "data-custom-content": customContent || void 0, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children: title ? /* @__PURE__ */ jsx20(Tooltip, { title, className: "sia-table__cell-tooltip", children: /* @__PURE__ */ jsx20("span", { children }) }) : children });
 }
 
+// src/components/Table/useRemainingHeight.ts
+import { useLayoutEffect as useLayoutEffect4, useState as useState17 } from "react";
+function useRemainingHeight(rootRef, options) {
+  const [height, setHeight] = useState17();
+  const enabled = !!options;
+  const container = typeof options === "object" ? options.container : void 0;
+  const bottomOffset = typeof options === "object" ? options.bottomOffset ?? 0 : 0;
+  const minHeight = typeof options === "object" ? options.minHeight ?? 0 : 0;
+  useLayoutEffect4(() => {
+    const root = rootRef.current;
+    if (!enabled || !root) return;
+    const win = root.ownerDocument.defaultView;
+    if (!win) return;
+    let frame = 0;
+    let disposed = false;
+    const observed = /* @__PURE__ */ new Set();
+    const observe = (element) => {
+      if (observed.has(element)) return;
+      observed.add(element);
+      resize?.observe(element);
+    };
+    const measure = () => {
+      frame = 0;
+      if (disposed || !root.isConnected || !root.getClientRects().length) return;
+      const target = container?.();
+      if (container && (!target || !target.getClientRects().length)) return;
+      let branch = root;
+      while (branch.parentElement) {
+        const parent = branch.parentElement;
+        observe(parent);
+        for (const sibling of parent.children) if (sibling !== branch) observe(sibling);
+        branch = parent;
+      }
+      if (target) observe(target);
+      const viewport = win.visualViewport;
+      const bottom = target ? target.getBoundingClientRect().top + target.clientTop + target.clientHeight - (parseFloat(win.getComputedStyle(target).paddingBottom) || 0) : viewport ? viewport.offsetTop + viewport.height : win.innerHeight;
+      const next = Math.max(0, minHeight, Math.floor(bottom - root.getBoundingClientRect().top - bottomOffset));
+      setHeight((previous) => previous === next ? previous : next);
+    };
+    const schedule = () => {
+      if (!disposed && !frame) frame = win.requestAnimationFrame(measure);
+    };
+    const onScroll = (event) => {
+      if (event.target instanceof Node && root.contains(event.target)) return;
+      schedule();
+    };
+    const onMotionEnd = (event) => {
+      if (event.target instanceof Element && event.target.contains(root)) schedule();
+    };
+    const resize = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(schedule);
+    const mutation = new MutationObserver(schedule);
+    for (let node = root.parentElement; node; node = node.parentElement) {
+      mutation.observe(node, { attributes: true, attributeFilter: ["style", "class", "hidden"], childList: true });
+    }
+    measure();
+    schedule();
+    win.addEventListener("resize", schedule);
+    win.addEventListener("scroll", onScroll, true);
+    win.addEventListener("transitionend", onMotionEnd, true);
+    win.addEventListener("animationend", onMotionEnd, true);
+    win.visualViewport?.addEventListener("resize", schedule);
+    win.visualViewport?.addEventListener("scroll", schedule);
+    return () => {
+      disposed = true;
+      win.cancelAnimationFrame(frame);
+      resize?.disconnect();
+      mutation.disconnect();
+      win.removeEventListener("resize", schedule);
+      win.removeEventListener("scroll", onScroll, true);
+      win.removeEventListener("transitionend", onMotionEnd, true);
+      win.removeEventListener("animationend", onMotionEnd, true);
+      win.visualViewport?.removeEventListener("resize", schedule);
+      win.visualViewport?.removeEventListener("scroll", schedule);
+    };
+  }, [rootRef, enabled, container, bottomOffset, minHeight]);
+  return enabled ? height : void 0;
+}
+
 // src/components/Table/TableCanvasLayer.tsx
-import { useLayoutEffect as useLayoutEffect4, useRef as useRef14 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef14 } from "react";
 
 // src/components/Table/utils.ts
 var AUTO_WIDTH_COLUMN_KEYS = /* @__PURE__ */ new Set(["action", "actions", "operation", "operations"]);
@@ -4808,7 +4886,7 @@ function toTablePageParams(current, pageSize) {
 import { jsx as jsx21 } from "react/jsx-runtime";
 function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHeight }) {
   const canvasRef = useRef14(null);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const canvas = canvasRef.current;
     const scroller = viewport.current;
     if (!canvas || !scroller) return;
@@ -4935,10 +5013,10 @@ function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHe
 }
 
 // src/components/Table/Table.tsx
-import { Fragment as Fragment8, forwardRef as forwardRef5, isValidElement as isValidElement4, memo, useCallback as useCallback2, useEffect as useEffect12, useImperativeHandle, useMemo as useMemo9, useRef as useRef16, useState as useState18 } from "react";
+import { Fragment as Fragment8, forwardRef as forwardRef5, isValidElement as isValidElement4, memo, useCallback as useCallback2, useEffect as useEffect12, useImperativeHandle, useMemo as useMemo9, useRef as useRef16, useState as useState19 } from "react";
 
 // src/components/Table/plugins.tsx
-import { isValidElement as isValidElement3, useEffect as useEffect11, useRef as useRef15, useState as useState17 } from "react";
+import { isValidElement as isValidElement3, useEffect as useEffect11, useRef as useRef15, useState as useState18 } from "react";
 import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function TableCheckbox({
   checked,
@@ -5565,7 +5643,7 @@ function TableSelectedItemsPanel({
   onRemove,
   onClear
 }) {
-  const [showAll, setShowAll] = useState17(false);
+  const [showAll, setShowAll] = useState18(false);
   const visibleEntries = showAll ? entries : entries.slice(0, maxCount);
   const hiddenCount = Math.max(0, entries.length - visibleEntries.length);
   const baseColumnMap = new Map(
@@ -5964,8 +6042,8 @@ function TableFilterControl({
   placeholder,
   onApply
 }) {
-  const [open, setOpen] = useState17(false);
-  const [draft, setDraft] = useState17(value);
+  const [open, setOpen] = useState18(false);
+  const [draft, setDraft] = useState18(value);
   const label = getColumnLabel(column);
   useEffect11(() => {
     if (open) setDraft(value);
@@ -6281,14 +6359,15 @@ function createTreePlugin(options = {}) {
     transformRows(rows, context) {
       if (options.ignoreChildrenColumn ?? true) return rows;
       const result = [];
-      const walk = (items, depth) => {
-        for (const row of items) {
+      const walk = (items, depth, guides) => {
+        for (const [rowIndex, row] of items.entries()) {
+          const hasNextSibling = rowIndex < items.length - 1;
           const children = row.record[childKey];
           const hasChildren = Array.isArray(children) && children.length > 0 && (options.canExpand?.(row.record) ?? true);
           result.push({
             ...row,
             depth,
-            meta: { ...row.meta, treeHasChildren: hasChildren }
+            meta: { ...row.meta, treeHasChildren: hasChildren, treeGuides: guides, treeHasNextSibling: hasNextSibling }
           });
           if (hasChildren && current(context).includes(row.key)) {
             walk(
@@ -6299,12 +6378,13 @@ function createTreePlugin(options = {}) {
                 depth: depth + 1,
                 meta: {}
               })),
-              depth + 1
+              depth + 1,
+              depth > 0 ? [...guides, hasNextSibling] : guides
             );
           }
         }
       };
-      walk(rows, 0);
+      walk(rows, 0, []);
       return result;
     },
     transformColumns(columns, context) {
@@ -6316,32 +6396,40 @@ function createTreePlugin(options = {}) {
         const previousRender = column.render;
         return {
           ...column,
+          ...options.showLine ? { ellipsis: false, meta: { ...column.meta, treeLines: true } } : {},
           render: (value, record, index, info) => /* @__PURE__ */ jsxs20(
             "span",
             {
-              className: "sia-table__tree-cell",
-              style: { paddingLeft: info.row.depth * 18 },
+              className: `sia-table__tree-cell${options.showLine ? " sia-table__tree-cell--lines" : ""}`,
+              style: options.showLine ? void 0 : { paddingLeft: info.row.depth * 18 },
               children: [
-                info.row.meta.treeHasChildren ? /* @__PURE__ */ jsx22(
-                  "button",
-                  {
-                    type: "button",
-                    className: "sia-table__tree-toggle",
-                    "aria-label": current(context).includes(info.row.key) ? "\u6536\u8D77\u5B50\u8282\u70B9" : "\u5C55\u5F00\u5B50\u8282\u70B9",
-                    "aria-expanded": current(context).includes(info.row.key),
-                    onClick: (event) => {
-                      event.stopPropagation();
-                      toggle(info.row.key, context);
-                    },
-                    children: /* @__PURE__ */ jsx22(
-                      Icon,
-                      {
-                        name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right",
-                        size: 13
-                      }
-                    )
-                  }
-                ) : /* @__PURE__ */ jsx22("span", { className: "sia-table__tree-placeholder" }),
+                options.showLine && info.row.depth > 0 && /* @__PURE__ */ jsxs20(Fragment7, { children: [
+                  info.row.meta.treeGuides.map((continued, level) => /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: `sia-table__tree-guide${continued ? " sia-table__tree-guide--continued" : ""}` }, level)),
+                  /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: `sia-table__tree-guide sia-table__tree-guide--branch${info.row.meta.treeHasNextSibling ? " sia-table__tree-guide--continued" : ""}` })
+                ] }),
+                /* @__PURE__ */ jsxs20("span", { className: options.showLine ? "sia-table__tree-node" : void 0, style: options.showLine ? void 0 : { display: "contents" }, children: [
+                  options.showLine && !!info.row.meta.treeHasChildren && current(context).includes(info.row.key) && /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: "sia-table__tree-stem" }),
+                  info.row.meta.treeHasChildren ? /* @__PURE__ */ jsx22(
+                    "button",
+                    {
+                      type: "button",
+                      className: "sia-table__tree-toggle",
+                      "aria-label": current(context).includes(info.row.key) ? "\u6536\u8D77\u5B50\u8282\u70B9" : "\u5C55\u5F00\u5B50\u8282\u70B9",
+                      "aria-expanded": current(context).includes(info.row.key),
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        toggle(info.row.key, context);
+                      },
+                      children: /* @__PURE__ */ jsx22(
+                        Icon,
+                        {
+                          name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right",
+                          size: 13
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx22("span", { className: "sia-table__tree-placeholder" })
+                ] }),
                 previousRender ? previousRender(value, record, index, info) : value
               ]
             }
@@ -6349,6 +6437,9 @@ function createTreePlugin(options = {}) {
         };
       });
     },
+    getCellProps(_row, column) {
+      return column.meta?.treeLines ? { className: "sia-table__cell--tree-lines" } : void 0;
+    },
     getApi: (context) => ({
       getExpandedKeys: () => current(context),
       setExpandedKeys: (keys) => setKeys(keys, context),
@@ -6392,8 +6483,8 @@ function EditableTableCell({
   trigger
 }) {
   const config = typeof editable === "object" ? editable : { type: "input" };
-  const [editValue, setEditValue] = useState17(value);
-  const [saving, setSaving] = useState17(false);
+  const [editValue, setEditValue] = useState18(value);
+  const [saving, setSaving] = useState18(false);
   const inputRef = useRef15(null);
   const editorRef = useRef15(null);
   const editValueRef = useRef15(value);
@@ -6738,10 +6829,10 @@ function ColumnSettingPanel({
   onClose,
   onApply
 }) {
-  const [draft, setDraft] = useState17(items);
+  const [draft, setDraft] = useState18(items);
   const listRef = useRef15(null);
   const cancelDrag = useRef15(null);
-  const [preview, setPreview] = useState17(null);
+  const [preview, setPreview] = useState18(null);
   useEffect11(() => {
     cancelDrag.current?.();
     if (open) setDraft(orderColumnSettings(items));
@@ -7541,6 +7632,7 @@ function TableInner(props, ref) {
     emptyText = "\u6682\u65E0\u6570\u636E",
     height,
     tableHeight,
+    fillRemaining,
     size = "medium",
     bordered = true,
     rowBordered = true,
@@ -7566,16 +7658,17 @@ function TableInner(props, ref) {
     ...htmlProps
   } = props;
   const rootRef = useRef16(null);
+  const remainingHeight = useRemainingHeight(rootRef, height == null && tableHeight == null ? fillRemaining : false);
   const scrollRef = useRef16(null);
   const tableRef = useRef16(null);
   useScrollbarProximity();
   const scrollbarDragRef = useRef16(null);
-  const [internalLoading, setInternalLoading] = useState18(false);
-  const [scrollTop, setScrollTop] = useState18(0);
-  const [scrollLeft, setScrollLeft] = useState18(0);
-  const [viewportHeight, setViewportHeight] = useState18(420);
-  const [viewportWidth, setViewportWidth] = useState18(0);
-  const [autoColumnWidths, setAutoColumnWidths] = useState18({});
+  const [internalLoading, setInternalLoading] = useState19(false);
+  const [scrollTop, setScrollTop] = useState19(0);
+  const [scrollLeft, setScrollLeft] = useState19(0);
+  const [viewportHeight, setViewportHeight] = useState19(420);
+  const [viewportWidth, setViewportWidth] = useState19(0);
+  const [autoColumnWidths, setAutoColumnWidths] = useState19({});
   const getRowKey = useCallback2((record, index) => typeof rowKey === "function" ? rowKey(record, index) : record[String(rowKey)] ?? index, [rowKey]);
   const builtInResizePlugin = useMemo9(() => createResizePlugin(), []);
   const builtInHighlightPlugin = useMemo9(() => createHighlightPlugin(), []);
@@ -7592,7 +7685,7 @@ function TableInner(props, ref) {
   const sortedPlugins = useMemo9(() => [...activePlugins].sort((a, b) => (a.order ?? 100) - (b.order ?? 100)), [activePlugins]);
   const pluginsByIdRef = useRef16(/* @__PURE__ */ new Map());
   pluginsByIdRef.current = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
-  const [pluginStates, setPluginStates] = useState18(() => Object.fromEntries(
+  const [pluginStates, setPluginStates] = useState19(() => Object.fromEntries(
     sortedPlugins.map((plugin) => [plugin.id, resolveInitialState(plugin)])
   ));
   const pluginApisRef = useRef16({});
@@ -7854,7 +7947,7 @@ function TableInner(props, ref) {
     return content ? /* @__PURE__ */ jsx23(Fragment8, { children: content }, `overlay-${plugin.id}`) : null;
   }).filter(Boolean);
   const hasToolbar = toolbarStart.length > 0 || toolbarEnd.length > 0;
-  const effectiveHeight = height ?? tableHeight ?? (shouldVirtualize ? 420 : void 0);
+  const effectiveHeight = height ?? tableHeight ?? remainingHeight ?? (shouldVirtualize ? 420 : void 0);
   const rootStyle = {
     ...style,
     height: effectiveHeight,
@@ -8266,7 +8359,7 @@ function applySiaTheme(mode, target = document.documentElement) {
 }
 
 // src/components/InputSelect.tsx
-import { forwardRef as forwardRef7, useEffect as useEffect13, useRef as useRef17, useState as useState19 } from "react";
+import { forwardRef as forwardRef7, useEffect as useEffect13, useRef as useRef17, useState as useState20 } from "react";
 import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 var InputSelect = forwardRef7(function InputSelect2({
   options,
@@ -8294,19 +8387,19 @@ var InputSelect = forwardRef7(function InputSelect2({
   ...inputProps
 }, forwardedRef) {
   const size = useControlSize(sizeProp);
-  const [internal, setInternal] = useState19(defaultValue);
+  const [internal, setInternal] = useState20(defaultValue);
   const current = value !== void 0 ? value : internal;
   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);
+  const [draft, setDraft] = useState20(text);
   useEffect13(() => {
     setDraft(text);
   }, [text, current]);
-  const [open, setOpen] = useState19(false);
-  const [search, setSearch] = useState19("");
-  const [modalOpen, setModalOpen] = useState19(false);
-  const [modalValues, setModalValues] = useState19([]);
-  const [selectedOnly, setSelectedOnly] = useState19(false);
+  const [open, setOpen] = useState20(false);
+  const [search, setSearch] = useState20("");
+  const [modalOpen, setModalOpen] = useState20(false);
+  const [modalValues, setModalValues] = useState20([]);
+  const [selectedOnly, setSelectedOnly] = useState20(false);
   const rootRef = useRef17(null);
   const popupRef = useRef17(null);
   const inputRef = useRef17(null);
@@ -8470,7 +8563,7 @@ var InputSelect = forwardRef7(function InputSelect2({
 });
 
 // src/components/QueryForm.tsx
-import { Children as Children4, useLayoutEffect as useLayoutEffect5, useRef as useRef18, useState as useState20 } from "react";
+import { Children as Children4, useLayoutEffect as useLayoutEffect6, useRef as useRef18, useState as useState21 } from "react";
 import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 function QueryForm({
   fields,
@@ -8504,17 +8597,17 @@ function QueryForm({
   ...formProps
 }) {
   const [form] = useForm(providedForm);
-  const [internalCollapsed, setInternalCollapsed] = useState20(defaultCollapsed);
-  const [needsCollapse, setNeedsCollapse] = useState20(false);
+  const [internalCollapsed, setInternalCollapsed] = useState21(defaultCollapsed);
+  const [needsCollapse, setNeedsCollapse] = useState21(false);
   const collapsed = collapsible && needsCollapse && (controlledCollapsed ?? internalCollapsed);
-  const [searching, setSearching] = useState20(false);
-  const [saving, setSaving] = useState20(false);
-  const [removing, setRemoving] = useState20(false);
-  const [saveOpen, setSaveOpen] = useState20(false);
-  const [saveName, setSaveName] = useState20("");
-  const [saveError, setSaveError] = useState20("");
-  const [error, setError] = useState20("");
-  const [activeShortcut, setActiveShortcut] = useState20("");
+  const [searching, setSearching] = useState21(false);
+  const [saving, setSaving] = useState21(false);
+  const [removing, setRemoving] = useState21(false);
+  const [saveOpen, setSaveOpen] = useState21(false);
+  const [saveName, setSaveName] = useState21("");
+  const [saveError, setSaveError] = useState21("");
+  const [error, setError] = useState21("");
+  const [activeShortcut, setActiveShortcut] = useState21("");
   const source = useRef18({ source: "submit" });
   const searchLock = useRef18(false);
   const saveLock = useRef18(false);
@@ -8527,8 +8620,8 @@ function QueryForm({
   const rowRef = useRef18(null);
   const actionsRef = useRef18(null);
   const toggleRef = useRef18(null);
-  const [fittingCount, setFittingCount] = useState20(limit);
-  useLayoutEffect5(() => {
+  const [fittingCount, setFittingCount] = useState21(limit);
+  useLayoutEffect6(() => {
     const row = rowRef.current;
     const actions = actionsRef.current;
     if (!row || !actions) return;

package/package.json

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