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

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 {
@@ -4401,12 +4413,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 +4572,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;
     /**

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;
     /**

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);
@@ -6392,8 +6470,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 +6816,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 +7619,7 @@ function TableInner(props, ref) {
     emptyText = "\u6682\u65E0\u6570\u636E",
     height,
     tableHeight,
+    fillRemaining,
     size = "medium",
     bordered = true,
     rowBordered = true,
@@ -7566,16 +7645,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 +7672,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 +7934,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 +8346,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 +8374,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 +8550,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 +8584,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 +8607,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.53",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",