@fangxinyan/lumina 0.6.18 → 0.7.0

package/dist/{chunk-UGAN4BBW.js → chunk-EA3NZBCZ.js}

@@ -1,14 +1,36 @@
-import { Pagination } from './chunk-V5SQOZPF.js';
-import { Checkbox } from './chunk-ZD3L4V3H.js';
-import { useFloating } from './chunk-DUFRASGO.js';
-import { Icon } from './chunk-FDZG27IG.js';
-import './tokens-RYJ3DFTU.css';
+import { Pagination } from './chunk-BJDQVVCG.js';
+import { Checkbox } from './chunk-KATJAJUU.js';
+import { useFloating } from './chunk-3QXP2ZNP.js';
+import { useOverlayLayer } from './chunk-2A4GYSN4.js';
+import { Button, IconButton } from './chunk-JHM7MN3G.js';
+import { Icon } from './chunk-LQMOYVQF.js';
+import { withComponentTheme, InternalComponentThemePart, useComponentPortalTheme } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Table-IWHIIGRJ.css';
+import './Table-W4HPZ7MZ.css';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
+function filterTableEntries(entries, filters, columnMap) {
+  const activeEntries = Object.entries(filters);
+  if (activeEntries.length === 0) return entries;
+  return entries.filter(({ row }) => {
+    for (const [columnKey, values] of activeEntries) {
+      const column = columnMap.get(columnKey);
+      if (!column) continue;
+      const matches = values.some((value) => {
+        if (column.onFilter) return column.onFilter(value, row);
+        if (column.dataIndex == null) return false;
+        const cell = row[column.dataIndex];
+        return cell === value || String(cell) === String(value);
+      });
+      if (!matches) return false;
+    }
+    return true;
+  });
+}
 var TableInner = ({
   columns,
   data,
@@ -19,6 +41,7 @@ var TableInner = ({
   sortKey,
   sortDir = "asc",
   onSort,
+  onChange,
   rowSelection,
   selectable,
   selected = [],
@@ -26,19 +49,27 @@ var TableInner = ({
   expandable,
   pagination,
   scroll,
+  tableProps,
+  caption,
   onRowClick,
   empty = "\u6682\u65E0\u6570\u636E",
   className = "",
   style,
   ...rest
 }, ref) => {
-  const keyOf = React.useCallback(
-    (row, i) => {
-      if (typeof rowKey === "function") return rowKey(row);
-      if (rowKey) return row[rowKey];
-      return i;
-    },
-    [rowKey]
+  const sourceEntries = React.useMemo(
+    () => data.map((row, sourceIndex) => {
+      let key;
+      if (typeof rowKey === "function") key = rowKey(row);
+      else if (rowKey) key = row[rowKey];
+      else key = sourceIndex;
+      return { row, key, sourceIndex };
+    }),
+    [data, rowKey]
+  );
+  const columnMap = React.useMemo(
+    () => new Map(columns.map((column) => [column.key, column])),
+    [columns]
   );
   const selectionMode = rowSelection ? "new" : selectable ? "legacy" : "off";
   const selectionType = rowSelection?.type ?? "checkbox";
@@ -78,47 +109,33 @@ var TableInner = ({
     }
     return out;
   }, [columns, innerFilters]);
-  const setColumnFilter = (col, values) => {
-    if (col.filteredValue !== void 0) return;
-    setInnerFilters((prev) => {
-      const next = { ...prev };
-      if (values.length === 0) delete next[col.key];
-      else next[col.key] = values;
-      return next;
-    });
-  };
-  const filteredData = React.useMemo(() => {
-    const entries = Object.entries(activeFilters);
-    if (entries.length === 0) return data;
-    return data.filter((row) => {
-      for (const [colKey, vals] of entries) {
-        const col = columns.find((c) => c.key === colKey);
-        if (!col) continue;
-        const match = vals.some((v2) => {
-          if (col.onFilter) return col.onFilter(v2, row);
-          if (col.dataIndex != null) {
-            const cell = row[col.dataIndex];
-            return cell === v2 || String(cell) === String(v2);
-          }
-          return false;
-        });
-        if (!match) return false;
-      }
-      return true;
-    });
-  }, [data, columns, activeFilters]);
+  const filteredEntries = React.useMemo(
+    () => filterTableEntries(sourceEntries, activeFilters, columnMap),
+    [activeFilters, columnMap, sourceEntries]
+  );
+  const filteredData = React.useMemo(
+    () => filteredEntries.map(({ row }) => row),
+    [filteredEntries]
+  );
   const pagEnabled = pagination !== false && pagination !== void 0;
   const pagCfg = pagEnabled ? pagination : {};
   const [innerPage, setInnerPage] = React.useState(
-    pagCfg.defaultCurrent ?? 1
+    Number.isFinite(pagCfg.defaultCurrent) ? Math.max(1, Math.trunc(pagCfg.defaultCurrent)) : 1
   );
   const [innerPageSize, setInnerPageSize] = React.useState(
-    pagCfg.defaultPageSize ?? pagCfg.pageSize ?? 10
+    (() => {
+      const initial = pagCfg.defaultPageSize ?? pagCfg.pageSize ?? 10;
+      return Number.isFinite(initial) && initial > 0 ? Math.max(1, Math.trunc(initial)) : 10;
+    })()
   );
   const pageControlled = pagCfg.current !== void 0;
-  const curPage = pageControlled ? pagCfg.current : innerPage;
-  const curPageSize = pagCfg.pageSize ?? innerPageSize;
-  const totalCount = pagCfg.total ?? filteredData.length;
+  const requestedPage = pageControlled ? pagCfg.current : innerPage;
+  const curPage = Number.isFinite(requestedPage) ? Math.max(1, Math.trunc(requestedPage)) : 1;
+  const requestedPageSize = pagCfg.pageSize ?? innerPageSize;
+  const curPageSize = Number.isFinite(requestedPageSize) && requestedPageSize > 0 ? Math.max(1, Math.trunc(requestedPageSize)) : 10;
+  const requestedTotal = pagCfg.total ?? filteredData.length;
+  const totalCount = Number.isFinite(requestedTotal) ? Math.max(0, Math.trunc(requestedTotal)) : filteredData.length;
+  const remotePagination = pagCfg.mode === "remote" || pagCfg.mode === void 0 && pagCfg.total !== void 0 && pageControlled;
   React.useEffect(() => {
     if (pagCfg.pageSize !== void 0 && pagCfg.pageSize !== innerPageSize) {
       setInnerPageSize(pagCfg.pageSize);
@@ -126,17 +143,44 @@ var TableInner = ({
   }, [pagCfg.pageSize]);
   React.useEffect(() => {
     if (!pagEnabled) return;
-    const pages = Math.max(1, Math.ceil(filteredData.length / curPageSize));
+    const pages = Math.max(1, Math.ceil(totalCount / curPageSize));
     if (!pageControlled && curPage > pages) setInnerPage(pages);
-  }, [filteredData.length, curPageSize, pagEnabled]);
-  const pagedData = React.useMemo(() => {
-    if (!pagEnabled) return filteredData;
-    if (pagCfg.total !== void 0 && pageControlled) {
-      return filteredData;
-    }
+  }, [curPage, curPageSize, pagEnabled, pageControlled, totalCount]);
+  const pagedEntries = React.useMemo(() => {
+    if (!pagEnabled || remotePagination) return filteredEntries;
     const start = (curPage - 1) * curPageSize;
-    return filteredData.slice(start, start + curPageSize);
-  }, [pagEnabled, filteredData, curPage, curPageSize, pagCfg.total, pageControlled]);
+    return filteredEntries.slice(start, start + curPageSize);
+  }, [curPage, curPageSize, filteredEntries, pagEnabled, remotePagination]);
+  const emitChange = React.useCallback((action, overrides = {}) => {
+    const nextCurrent = overrides.current ?? curPage;
+    const nextPageSize = overrides.pageSize ?? curPageSize;
+    onChange?.({
+      action,
+      pagination: pagEnabled ? { current: nextCurrent, pageSize: nextPageSize, total: totalCount } : void 0,
+      filters: overrides.filters ?? activeFilters,
+      sorter: overrides.sorter ?? { key: sortKey, direction: sortKey ? sortDir : void 0 },
+      currentData: overrides.currentData ?? filteredData
+    });
+  }, [activeFilters, curPage, curPageSize, filteredData, onChange, pagEnabled, sortDir, sortKey, totalCount]);
+  const setColumnFilter = React.useCallback((column, values) => {
+    const nextFilters = { ...activeFilters };
+    if (values.length === 0) delete nextFilters[column.key];
+    else nextFilters[column.key] = values;
+    if (column.filteredValue === void 0) {
+      setInnerFilters((previous) => {
+        const next = { ...previous };
+        if (values.length === 0) delete next[column.key];
+        else next[column.key] = values;
+        return next;
+      });
+    }
+    if (pagEnabled) {
+      if (!pageControlled) setInnerPage(1);
+      pagCfg.onChange?.(1, curPageSize);
+    }
+    const nextData = filterTableEntries(sourceEntries, nextFilters, columnMap).map(({ row }) => row);
+    emitChange("filter", { current: 1, filters: nextFilters, currentData: nextData });
+  }, [activeFilters, columnMap, curPageSize, emitChange, pagCfg, pagEnabled, pageControlled, sourceEntries]);
   const skipNextPaginationChangeRef = React.useRef(false);
   const onPageChange = (p) => {
     if (skipNextPaginationChangeRef.current) {
@@ -145,34 +189,38 @@ var TableInner = ({
     }
     if (!pageControlled) setInnerPage(p);
     pagCfg.onChange?.(p, curPageSize);
+    emitChange("paginate", { current: p });
   };
   const onPageSizeChange = (_current, size) => {
     skipNextPaginationChangeRef.current = true;
     if (!pageControlled) setInnerPage(1);
     if (pagCfg.pageSize === void 0) setInnerPageSize(size);
     pagCfg.onChange?.(1, size);
+    emitChange("paginate", { current: 1, pageSize: size });
   };
   const [innerExpanded, setInnerExpanded] = React.useState(
     expandable?.defaultExpandedRowKeys ?? []
   );
   const expandControlled = expandable?.expandedRowKeys !== void 0;
   const expandedKeys = expandControlled ? expandable.expandedRowKeys : innerExpanded;
+  const expandedKeySet = React.useMemo(() => new Set(expandedKeys), [expandedKeys]);
+  const selectedKeySet = React.useMemo(() => new Set(selectedKeys), [selectedKeys]);
   const hasExpandable = !!expandable?.expandedRowRender;
   const toggleExpand = (row, k) => {
-    const isOpen = expandedKeys.includes(k);
+    const isOpen = expandedKeySet.has(k);
     const next = isOpen ? expandedKeys.filter((x) => x !== k) : [...expandedKeys, k];
     if (!expandControlled) setInnerExpanded(next);
     expandable?.onExpand?.(!isOpen, row);
   };
   const v = variant ?? (striped ? "striped" : "default");
-  const rowsToRender = pagedData;
-  const selectableKeysOnPage = rowsToRender.map((r, i) => ({ row: r, k: keyOf(r, i) })).filter(({ row }) => {
+  const rowsToRender = pagedEntries;
+  const selectableKeysOnPage = rowsToRender.map(({ row, key }) => ({ row, k: key })).filter(({ row }) => {
     if (selectionMode !== "new") return true;
     const props = rowSelection?.getCheckboxProps?.(row);
     return !props?.disabled;
   });
-  const allSelectedOnPage = selectionMode !== "off" && selectableKeysOnPage.length > 0 && selectableKeysOnPage.every(({ k }) => selectedKeys.includes(k));
-  const someSelectedOnPage = selectionMode !== "off" && selectableKeysOnPage.some(({ k }) => selectedKeys.includes(k)) && !allSelectedOnPage;
+  const allSelectedOnPage = selectionMode !== "off" && selectableKeysOnPage.length > 0 && selectableKeysOnPage.every(({ k }) => selectedKeySet.has(k));
+  const someSelectedOnPage = selectionMode !== "off" && selectableKeysOnPage.some(({ k }) => selectedKeySet.has(k)) && !allSelectedOnPage;
   const toggleRow = (row, k) => {
     if (selectionMode === "new") {
       const props = rowSelection?.getCheckboxProps?.(row);
@@ -181,12 +229,13 @@ var TableInner = ({
       if (selectionType === "radio") {
         next = [k];
       } else {
-        next = selectedKeys.includes(k) ? selectedKeys.filter((x) => x !== k) : [...selectedKeys, k];
+        next = selectedKeySet.has(k) ? selectedKeys.filter((x) => x !== k) : [...selectedKeys, k];
       }
-      const nextRows = data.filter((r, i) => next.includes(keyOf(r, i)));
+      const nextSet = new Set(next);
+      const nextRows = sourceEntries.filter(({ key }) => nextSet.has(key)).map(({ row: item }) => item);
       commitSelected(next, nextRows);
     } else if (selectionMode === "legacy") {
-      const next = selectedKeys.includes(k) ? selectedKeys.filter((x) => x !== k) : [...selectedKeys, k];
+      const next = selectedKeySet.has(k) ? selectedKeys.filter((x) => x !== k) : [...selectedKeys, k];
       commitSelected(next, []);
     }
   };
@@ -196,13 +245,15 @@ var TableInner = ({
     if (allSelectedOnPage) {
       const pageKeys = new Set(selectableKeysOnPage.map(({ k }) => k));
       const next = selectedKeys.filter((k) => !pageKeys.has(k));
-      const nextRows = data.filter((r, i) => next.includes(keyOf(r, i)));
+      const nextSet = new Set(next);
+      const nextRows = sourceEntries.filter(({ key }) => nextSet.has(key)).map(({ row }) => row);
       commitSelected(next, nextRows);
     } else {
       const set = new Set(selectedKeys);
       selectableKeysOnPage.forEach(({ k }) => set.add(k));
       const next = Array.from(set);
-      const nextRows = data.filter((r, i) => next.includes(keyOf(r, i)));
+      const nextSet = new Set(next);
+      const nextRows = sourceEntries.filter(({ key }) => nextSet.has(key)).map(({ row }) => row);
       commitSelected(next, nextRows);
     }
   };
@@ -210,6 +261,18 @@ var TableInner = ({
   const showExpandCol = hasExpandable;
   const extraColCount = (showSelCol ? 1 : 0) + (showExpandCol ? 1 : 0);
   const totalColCount = columns.length + extraColCount;
+  const handleSort = React.useCallback((columnKey) => {
+    const nextDirection = sortKey === columnKey && sortDir === "asc" ? "desc" : "asc";
+    onSort?.(columnKey);
+    if (pagEnabled) {
+      if (!pageControlled) setInnerPage(1);
+      pagCfg.onChange?.(1, curPageSize);
+    }
+    emitChange("sort", {
+      current: 1,
+      sorter: { key: columnKey, direction: nextDirection }
+    });
+  }, [curPageSize, emitChange, onSort, pagCfg, pagEnabled, pageControlled, sortDir, sortKey]);
   const wrapStyle = {};
   const innerTableStyle = {};
   let wrapClass = "table-wrap";
@@ -223,6 +286,11 @@ var TableInner = ({
     innerTableStyle.minWidth = scroll.x;
     wrapClass += " scroll-x";
   }
+  const {
+    className: nativeTableClassName = "",
+    style: nativeTableStyle,
+    ...nativeTableProps
+  } = tableProps ?? {};
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -234,19 +302,22 @@ var TableInner = ({
         children: /* @__PURE__ */ jsxs(
           "table",
           {
-            className: `table ${v} ${hoverable ? "hoverable" : ""} ${scroll?.y != null ? "sticky-head" : ""}`,
-            style: innerTableStyle,
+            ...nativeTableProps,
+            className: `table ${v} ${hoverable ? "hoverable" : ""} ${scroll?.y != null ? "sticky-head" : ""} ${nativeTableClassName}`,
+            style: { ...innerTableStyle, ...nativeTableStyle },
             children: [
+              caption != null && /* @__PURE__ */ jsx("caption", { children: caption }),
               /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                showExpandCol && /* @__PURE__ */ jsx("th", { className: "row-expand", style: { width: 40 } }),
-                showSelCol && /* @__PURE__ */ jsx("th", { className: "row-check", style: { width: 44 }, children: selectionType === "checkbox" && /* @__PURE__ */ jsx(
+                showExpandCol && /* @__PURE__ */ jsx("th", { scope: "col", className: "row-expand", style: { width: 40 } }),
+                showSelCol && /* @__PURE__ */ jsx("th", { scope: "col", className: "row-check", style: { width: 44 }, children: selectionType === "checkbox" && /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Checkbox", children: /* @__PURE__ */ jsx(
                   Checkbox,
                   {
                     checked: allSelectedOnPage,
                     indeterminate: someSelectedOnPage,
-                    onChange: toggleAll
+                    onChange: toggleAll,
+                    label: /* @__PURE__ */ jsx("span", { className: "table-sr-only", children: "\u9009\u62E9\u5F53\u524D\u9875" })
                   }
-                ) }),
+                ) }) }),
                 columns.map((c) => {
                   const sorted = sortKey === c.key;
                   const hasFilters = !!c.filters?.length;
@@ -256,16 +327,29 @@ var TableInner = ({
                     {
                       className: `${c.sortable ? "sortable" : ""} ${sorted ? "sorted" : ""} ${hasFilters ? "filterable" : ""}`,
                       style: { width: c.width, textAlign: c.align ?? "left" },
-                      onClick: () => c.sortable && onSort?.(c.key),
+                      scope: "col",
+                      "aria-sort": c.sortable ? sorted ? sortDir === "asc" ? "ascending" : "descending" : "none" : void 0,
                       children: [
-                        /* @__PURE__ */ jsx("span", { className: "th-label", children: c.title }),
-                        c.sortable && /* @__PURE__ */ jsx("span", { className: "sort-ind", children: /* @__PURE__ */ jsx(
-                          Icon,
+                        c.sortable ? /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Button", children: /* @__PURE__ */ jsxs(
+                          Button,
                           {
-                            name: sorted ? sortDir === "asc" ? "chevUp" : "chevDown" : "chevDown",
-                            size: 10
+                            type: "button",
+                            size: "sm",
+                            variant: "ghost",
+                            className: "table-sort-trigger",
+                            onClick: () => handleSort(c.key),
+                            children: [
+                              /* @__PURE__ */ jsx("span", { className: "th-label", children: c.title }),
+                              /* @__PURE__ */ jsx("span", { className: "sort-ind", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                                Icon,
+                                {
+                                  name: sorted ? sortDir === "asc" ? "chevUp" : "chevDown" : "chevDown",
+                                  size: 10
+                                }
+                              ) })
+                            ]
                           }
-                        ) }),
+                        ) }) : /* @__PURE__ */ jsx("span", { className: "th-label", children: c.title }),
                         hasFilters && /* @__PURE__ */ jsx(
                           ColumnFilterButton,
                           {
@@ -281,12 +365,11 @@ var TableInner = ({
                   );
                 })
               ] }) }),
-              /* @__PURE__ */ jsx("tbody", { children: rowsToRender.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: totalColCount, className: "table-empty", children: empty }) }) : rowsToRender.map((row, i) => {
-                const k = keyOf(row, i);
-                const isSel = selectedKeys.includes(k);
+              /* @__PURE__ */ jsx("tbody", { children: rowsToRender.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: totalColCount, className: "table-empty", children: empty }) }) : rowsToRender.map(({ row, key: k }, i) => {
+                const isSel = selectedKeySet.has(k);
                 const selProps = rowSelection?.getCheckboxProps?.(row);
                 const canExpand = hasExpandable && (expandable?.rowExpandable?.(row) ?? true);
-                const isExpanded = canExpand && expandedKeys.includes(k);
+                const isExpanded = canExpand && expandedKeySet.has(k);
                 const cardSurfaceTarget = showExpandCol ? "__expand" : showSelCol ? "__select" : columns[0]?.key;
                 const cardRowSurface = v === "cards" ? /* @__PURE__ */ jsx("span", { className: "card-row-surface", "aria-hidden": "true" }) : null;
                 return /* @__PURE__ */ jsxs(React.Fragment, { children: [
@@ -295,6 +378,15 @@ var TableInner = ({
                     {
                       className: `${onRowClick ? "clickable" : ""} ${isSel ? "selected" : ""}`,
                       onClick: onRowClick ? () => onRowClick(row, i) : void 0,
+                      tabIndex: onRowClick ? 0 : void 0,
+                      "aria-selected": selectionMode !== "off" ? isSel : void 0,
+                      onKeyDown: onRowClick ? (event) => {
+                        if (event.currentTarget !== event.target) return;
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          onRowClick(row, i);
+                        }
+                      } : void 0,
                       children: [
                         showExpandCol && /* @__PURE__ */ jsxs(
                           "td",
@@ -327,10 +419,7 @@ var TableInner = ({
                           "td",
                           {
                             className: "row-check",
-                            onClick: (e) => {
-                              e.stopPropagation();
-                              toggleRow(row, k);
-                            },
+                            onClick: (event) => event.stopPropagation(),
                             children: [
                               cardSurfaceTarget === "__select" && cardRowSurface,
                               selectionType === "radio" ? /* @__PURE__ */ jsx(
@@ -339,6 +428,7 @@ var TableInner = ({
                                   type: "button",
                                   role: "radio",
                                   "aria-checked": isSel,
+                                  "aria-label": `\u9009\u62E9\u7B2C ${i + 1} \u884C`,
                                   disabled: selProps?.disabled,
                                   className: `radio-dot ${isSel ? "checked" : ""}`,
                                   onClick: (e) => {
@@ -346,14 +436,19 @@ var TableInner = ({
                                     toggleRow(row, k);
                                   }
                                 }
-                              ) : /* @__PURE__ */ jsx(
+                              ) : /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Checkbox", children: /* @__PURE__ */ jsx(
                                 Checkbox,
                                 {
                                   checked: isSel,
                                   disabled: selProps?.disabled,
-                                  onChange: () => toggleRow(row, k)
+                                  onChange: () => toggleRow(row, k),
+                                  label: /* @__PURE__ */ jsxs("span", { className: "table-sr-only", children: [
+                                    "\u9009\u62E9\u7B2C ",
+                                    i + 1,
+                                    " \u884C"
+                                  ] })
                                 }
-                              )
+                              ) })
                             ]
                           }
                         ),
@@ -375,7 +470,7 @@ var TableInner = ({
         )
       }
     ),
-    pagEnabled && /* @__PURE__ */ jsx("div", { className: "table-pagination", children: /* @__PURE__ */ jsx(
+    pagEnabled && /* @__PURE__ */ jsx("div", { className: "table-pagination", children: /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Pagination", children: /* @__PURE__ */ jsx(
       Pagination,
       {
         total: totalCount,
@@ -387,11 +482,16 @@ var TableInner = ({
         pageSizeOptions: pagCfg.pageSizeOptions,
         onShowSizeChange: onPageSizeChange
       }
-    ) })
+    ) }) })
   ] });
 };
-var Table = React.forwardRef(TableInner);
-Table.displayName = "Table";
+var TableBase = React.forwardRef(TableInner);
+TableBase.displayName = "Table";
+var Table = withComponentTheme(
+  TableBase,
+  "Table",
+  ["table", "button", "checkbox", "pagination", "select", "input"]
+);
 function ColumnFilterButton({
   column,
   activeValues,
@@ -400,16 +500,32 @@ function ColumnFilterButton({
 }) {
   const [open, setOpen] = React.useState(false);
   const [draft, setDraft] = React.useState(activeValues);
-  const panelRef = React.useRef(null);
-  const { triggerRef, floatingStyle } = useFloating({
+  const portalContainer = usePortalContainer();
+  const portalTheme = useComponentPortalTheme(["Table", "TablePro"]);
+  const panelId = React.useId();
+  const { triggerRef, floatingRef: panelRef, floatingStyle, zIndex: panelZIndex } = useFloating({
     open,
     placement: "bottom",
     panelWidth: 200,
     panelHeight: Math.min(260, (column.filters?.length ?? 0) * 32 + 80),
     alignCross: "end"
   });
+  const closeFromEscape = React.useCallback(() => {
+    setOpen(false);
+    window.requestAnimationFrame(() => triggerRef.current?.focus());
+  }, [triggerRef]);
+  useOverlayLayer({
+    open: open && portalContainer != null,
+    containerRef: panelRef,
+    ownerRef: triggerRef,
+    zIndex: panelZIndex,
+    onEscape: closeFromEscape
+  });
   React.useEffect(() => {
-    if (open) setDraft(activeValues);
+    if (open) {
+      setDraft(activeValues);
+      window.requestAnimationFrame(() => panelRef.current?.focus());
+    }
   }, [open, activeValues]);
   React.useEffect(() => {
     if (!open) return;
@@ -424,45 +540,54 @@ function ColumnFilterButton({
   }, [open]);
   const toggle = (v) => setDraft((d) => d.includes(v) ? d.filter((x) => x !== v) : [...d, v]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "button",
+    /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "IconButton", children: /* @__PURE__ */ jsx(
+      IconButton,
       {
         ref: triggerRef,
-        type: "button",
+        icon: "filter",
+        size: "sm",
+        variant: "ghost",
         className: `filter-ind ${active ? "active" : ""}`,
-        "aria-label": "Filter column",
+        tip: "\u7B5B\u9009\u5217",
+        "aria-expanded": open,
+        "aria-controls": open ? panelId : void 0,
+        "aria-haspopup": "dialog",
         onClick: (e) => {
           e.stopPropagation();
           setOpen((o) => !o);
-        },
-        children: /* @__PURE__ */ jsx(Icon, { name: "filter", size: 10 })
+        }
       }
-    ),
-    open && typeof document !== "undefined" && createPortal(
+    ) }),
+    open && portalContainer && createPortal(
       /* @__PURE__ */ jsxs(
         "div",
         {
+          id: panelId,
           ref: panelRef,
           className: "table-filter-panel",
-          style: floatingStyle,
+          ...portalTheme.dataAttributes,
+          style: { ...floatingStyle, ...portalTheme.style, ...portalTheme.styles.popup },
+          role: "dialog",
+          "aria-label": "\u5217\u7B5B\u9009",
+          tabIndex: -1,
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx("div", { className: "table-filter-options", children: (column.filters ?? []).map((f) => /* @__PURE__ */ jsxs("label", { className: "table-filter-item", children: [
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  checked: draft.includes(f.value),
-                  onChange: () => toggle(f.value)
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { children: f.text })
-            ] }, String(f.value))) }),
-            /* @__PURE__ */ jsxs("div", { className: "table-filter-actions", children: [
+            /* @__PURE__ */ jsx("div", { className: "table-filter-options", children: (column.filters ?? []).map((f) => /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Checkbox", children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                className: "table-filter-item",
+                label: f.text,
+                checked: draft.includes(f.value),
+                onChange: () => toggle(f.value)
+              }
+            ) }, String(f.value))) }),
+            /* @__PURE__ */ jsx("div", { className: "table-filter-actions", children: /* @__PURE__ */ jsxs(InternalComponentThemePart, { components: "Button", children: [
               /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
-                  type: "button",
-                  className: "tf-btn ghost",
+                  size: "sm",
+                  variant: "ghost",
+                  className: "tf-btn",
                   onClick: () => {
                     setDraft([]);
                     onApply([]);
@@ -472,10 +597,11 @@ function ColumnFilterButton({
                 }
               ),
               /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
-                  type: "button",
-                  className: "tf-btn primary",
+                  size: "sm",
+                  variant: "primary",
+                  className: "tf-btn",
                   onClick: () => {
                     onApply(draft);
                     setOpen(false);
@@ -483,11 +609,11 @@ function ColumnFilterButton({
                   children: "\u786E\u5B9A"
                 }
               )
-            ] })
+            ] }) })
           ]
         }
       ),
-      document.body
+      portalContainer
     )
   ] });
 }