@hi-ui/schema-editable-table 4.0.0-experimental.1

package/lib/esm/features/row-operation/wrapper.js

@@ -0,0 +1,100 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { cls } from '../../utils/cls.js';
+import { useEditableSchemaTableCtx } from '../../ctx.js';
+import '../../container/index.js';
+import { ROW_OPERATION_COL_WIDTH } from '../../const.js';
+import { OperationBodyCell } from './cell.js';
+import { useTableContainer } from '../../container/ctx.js';
+function OperationTable(props) {
+  var _a;
+  var _useEditableSchemaTab = useEditableSchemaTableCtx(),
+    propsRef = _useEditableSchemaTab.propsRef;
+  var width = ((_a = propsRef.current.rowOperation) === null || _a === void 0 ? void 0 : _a.width) || ROW_OPERATION_COL_WIDTH;
+  return /*#__PURE__*/React.createElement("table", {
+    // table
+    className: cls('mock-operation'),
+    "data-is-operation": true,
+    style: {
+      width: width,
+      flexBasis: width
+    }
+  }, /*#__PURE__*/React.createElement("colgroup", null, /*#__PURE__*/React.createElement("col", {
+    style: {
+      width: width,
+      minWidth: width
+    }
+  })), props.children);
+}
+function OperationHeader() {
+  var _a, _b;
+  var _useEditableSchemaTab2 = useEditableSchemaTableCtx(),
+    propsRef = _useEditableSchemaTab2.propsRef;
+  var cellText = (_b = (_a = propsRef.current.rowOperation) === null || _a === void 0 ? void 0 : _a.headerText) !== null && _b !== void 0 ? _b : '操作';
+  return /*#__PURE__*/React.createElement(OperationTable, null, /*#__PURE__*/React.createElement("thead", {
+    className: cls('header')
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: cls('header-row')
+  }, /*#__PURE__*/React.createElement("th", {
+    className: cls('header-cell'),
+    "data-text-align": "center"
+  }, cellText))));
+}
+function OperationBody() {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _useEditableSchemaTab3 = useEditableSchemaTableCtx(),
+    table = _useEditableSchemaTab3.table;
+  var _useTableContainer = useTableContainer(),
+    virtualize = _useTableContainer.virtualize;
+  var _table$getRowModel = table.getRowModel(),
+    realRows = _table$getRowModel.rows;
+  return /*#__PURE__*/React.createElement(OperationTable, null, /*#__PURE__*/React.createElement("tbody", {
+    className: cls('body')
+  }, ((_b = (_a = virtualize === null || virtualize === void 0 ? void 0 : virtualize.rowPadding) === null || _a === void 0 ? void 0 : _a.top) !== null && _b !== void 0 ? _b : 0) > 0 && ( /*#__PURE__*/React.createElement("tr", {
+    className: cls('body-row', 'virtual-spacer', 'virtual-spacer-top')
+  }, /*#__PURE__*/React.createElement("td", {
+    style: {
+      height: (_d = (_c = virtualize === null || virtualize === void 0 ? void 0 : virtualize.rowPadding) === null || _c === void 0 ? void 0 : _c.top) !== null && _d !== void 0 ? _d : 0
+    }
+  }))), ((virtualize === null || virtualize === void 0 ? void 0 : virtualize.rows) || realRows).map(function (rowOrVirtual) {
+    var row = 'index' in rowOrVirtual ? realRows[rowOrVirtual.index] : rowOrVirtual;
+    if (!row) return null;
+    return /*#__PURE__*/React.createElement("tr", {
+      key: row.id,
+      className: cls('body-row'),
+      "data-index": row.index,
+      "data-id": row.id
+    }, /*#__PURE__*/React.createElement("td", {
+      className: cls('body-cell'),
+      "data-text-align": "center"
+    }, /*#__PURE__*/React.createElement(OperationBodyCell, {
+      row: row
+    })));
+  }), ((_f = (_e = virtualize === null || virtualize === void 0 ? void 0 : virtualize.rowPadding) === null || _e === void 0 ? void 0 : _e.bottom) !== null && _f !== void 0 ? _f : 0) > 0 && ( /*#__PURE__*/React.createElement("tr", {
+    className: cls('body-row', 'virtual-spacer', 'virtual-spacer-bottom')
+  }, /*#__PURE__*/React.createElement("td", {
+    style: {
+      height: (_h = (_g = virtualize === null || virtualize === void 0 ? void 0 : virtualize.rowPadding) === null || _g === void 0 ? void 0 : _g.bottom) !== null && _h !== void 0 ? _h : 0
+    }
+  })))));
+}
+// 暂时用不上，预留位置待扩展
+function OperationFooter() {
+  return /*#__PURE__*/React.createElement(OperationTable, null, /*#__PURE__*/React.createElement("tfoot", {
+    className: cls('footer')
+  }, /*#__PURE__*/React.createElement("tr", {
+    className: cls('footer-row')
+  }, /*#__PURE__*/React.createElement("td", {
+    className: cls('footer-cell'),
+    "data-text-align": "center"
+  }))));
+}
+export { OperationBody, OperationFooter, OperationHeader };

package/lib/esm/features/row-selection/cell.js

@@ -0,0 +1,101 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { Checkbox } from '@hi-ui/checkbox';
+import { Radio } from '@hi-ui/radio';
+import { Schedular } from '@hi-ui/schema-utils';
+import { useEditableSchemaTableCtx } from '../../ctx.js';
+import { cls } from '../../utils/cls.js';
+import { dftSelectionType } from './const.js';
+function SelectionHeaderCell() {
+  var _useEditableSchemaTab = useEditableSchemaTableCtx(),
+    table = _useEditableSchemaTab.table,
+    propsRef = _useEditableSchemaTab.propsRef;
+  // // 经过性能优化，已移除额外订阅
+  // // 此时保留，反而会导致本组件重复重渲染
+  // // 保留此处注释，用以后续调整
+  // const { rowSelectionState } = useEditableSchemaTableCtx()
+  // useSubscribe(rowSelectionState)
+  var rowSelection = propsRef.current.rowSelection;
+  if (!rowSelection) return null; // 其实走不到，仅用来收窄类型
+  var _rowSelection$type = rowSelection.type,
+    type = _rowSelection$type === void 0 ? dftSelectionType : _rowSelection$type;
+  /** 修复 <th> 元素嵌套在另一个 <th> 元素中，违反 HTML 规范的问题 */
+  if (type === 'radio') return /*#__PURE__*/React.createElement("div", {
+    className: cls('header-cell')
+  });
+  // NOTE: 表头全选更改为仅选择当页数据
+  var checked = table.getIsAllPageRowsSelected();
+  var indeterminate = table.getIsSomePageRowsSelected();
+  var handleChange = function handleCheckAllChange(event) {
+    var innerHandler = table.getToggleAllPageRowsSelectedHandler();
+    innerHandler(event);
+    // 稍微延迟一下，等待内部状态完成更新
+    Schedular.nextMicro(function () {
+      var _a;
+      var checked = table.getIsAllPageRowsSelected();
+      var indeterminate = table.getIsSomePageRowsSelected();
+      (_a = rowSelection.onCheckAllChange) === null || _a === void 0 ? void 0 : _a.call(rowSelection, {
+        checked: checked,
+        indeterminate: indeterminate
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement(Checkbox
+  // Checkbox
+  , {
+    // Checkbox
+    checked: checked,
+    indeterminate: indeterminate,
+    onChange: handleChange
+  });
+}
+function SelectionBodyCell(props) {
+  var row = props.row;
+  var _useEditableSchemaTab2 = useEditableSchemaTableCtx(),
+    propsRef = _useEditableSchemaTab2.propsRef;
+  var rowSelection = propsRef.current.rowSelection;
+  var _ref = rowSelection || {},
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? dftSelectionType : _ref$type;
+  // // 经过性能优化，已移除额外订阅
+  // // 此时保留，反而会导致本组件重复重渲染
+  // // 保留此处注释，用以后续调整
+  // const { rowSelectionState } = useEditableSchemaTableCtx<TData>()
+  // const { enableDynamicRowSelection } = rowSelection || {}
+  // useSubscribe(
+  //   rowSelectionState,
+  //   // 如果启用了动态行可选状态支持，则不订阅(相当于订阅全部变化)
+  //   enableDynamicRowSelection ? undefined : [row.id]
+  // )
+  if (!rowSelection) return null; // 其实走不到，仅用来收窄类型
+  var SelectComp = type === 'radio' ? Radio : Checkbox;
+  function handleChange(event) {
+    var innerHandler = row.getToggleSelectedHandler();
+    innerHandler(event);
+    // 上面是行本身的变化处理逻辑
+    // 下面是存在父行的情况，需要处理父行的选中状态
+    row.$afterToggleSelected();
+  }
+  // 根据组件类型决定是否传递 indeterminate 属性
+  var commonProps = {
+    checked: row.getIsSelected(),
+    onChange: handleChange,
+    disabled: !row.getCanSelect()
+  };
+  // 只有 Checkbox 支持 indeterminate 属性
+  if (type === 'checkbox') {
+    return /*#__PURE__*/React.createElement(SelectComp, Object.assign({}, commonProps, {
+      indeterminate: row.getIsSomeSelected()
+    }));
+  }
+  return /*#__PURE__*/React.createElement(SelectComp, Object.assign({}, commonProps));
+}
+export { SelectionBodyCell, SelectionHeaderCell };

package/lib/esm/features/row-selection/const.js

@@ -0,0 +1,11 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var dftSelectionType = 'checkbox';
+export { dftSelectionType };

package/lib/esm/features/row-selection/hooks/index.js

@@ -0,0 +1,24 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useSubscription } from '@hi-ui/use-subscription';
+import 'ahooks';
+import 'lodash-es';
+import 'react';
+import '../../../utils/cls.js';
+import '@tanstack/react-table';
+
+// 暂时没有太多逻辑，仅在此处包装
+function useRowSelectionState() {
+  var rowSelectionState = useSubscription({});
+  return {
+    rowSelectionState: rowSelectionState
+  };
+}
+export { useRowSelectionState };

package/lib/esm/features/row-selection/hooks/use-click-select.js

@@ -0,0 +1,65 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useEffect } from 'react';
+import { useEditableSchemaTableCtx } from '../../../ctx.js';
+import { cls } from '../../../utils/cls.js';
+import 'lodash-es';
+import '@tanstack/react-table';
+import 'ahooks';
+var useClickSelect = function useClickSelect() {
+  var _useEditableSchemaTab = useEditableSchemaTableCtx(),
+    tableContainerRef = _useEditableSchemaTab.tableContainerRef,
+    propsRef = _useEditableSchemaTab.propsRef,
+    table = _useEditableSchemaTab.table;
+  useEffect(function () {
+    var _a, _b;
+    // 只在开启点击行选择时启用
+    if (!((_b = (_a = propsRef.current) === null || _a === void 0 ? void 0 : _a.rowSelection) === null || _b === void 0 ? void 0 : _b.enableClickSelect)) return;
+    if (!tableContainerRef.current) return;
+    var container = tableContainerRef.current;
+    var selector = "." + cls('body-wrapper') + " ." + cls('main-content');
+    var tableEl = container.querySelector(selector);
+    if (!tableEl) return;
+    var handleClick = function handleClick(event) {
+      var _a, _b, _c;
+      var target = event.target;
+      // TODO 此处还能还有其他的待排除元素，待识别后更新
+      // 排除 input 元素的点击
+      if (((_a = target.tagName) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'INPUT') return;
+      // 排除 svg 元素的点击
+      if (((_b = target.tagName) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === 'SVG') return;
+      if (((_c = target.tagName) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === 'PATH') return;
+      // 排除 HiUI 的表单项
+      if (target.className.includes('hi')) {
+        //  Select 等使用 MockInput 的组件
+        if (target.className.includes('mock-input')) return;
+        // 日期选择器组件
+        if (target.className.includes('date-picker')) return;
+        // 多选选择器组件
+        if (target.className.includes('tag-input-mock')) return;
+      }
+      // 查找当前点击的行元素
+      var rowEl = target.closest('tr[data-id]');
+      if (!rowEl) return;
+      var rowId = rowEl.getAttribute('data-id');
+      if (!rowId) return;
+      // 获取行实例并触发选中
+      var row = table.getRow(rowId);
+      if (!row) return;
+      row.toggleSelected();
+      row.$afterToggleSelected();
+    };
+    tableEl.addEventListener('click', handleClick);
+    return function () {
+      tableEl.removeEventListener('click', handleClick);
+    };
+  }, [tableContainerRef, propsRef, table]);
+};
+export { useClickSelect };

package/lib/esm/features/row-selection/hooks/use-opts.js

@@ -0,0 +1,114 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useMount } from 'ahooks';
+import { isEqual } from 'lodash-es';
+function useRowSelectionOpts(ctx) {
+  var rowSelection = ctx.rowSelection,
+    innerRef = ctx.innerRef;
+  // 挂载时将默认选中的行同步至内部状态
+  useMount(function () {
+    if (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.dftSelectedRowKeys) {
+      var globalActionsRef = innerRef.current.globalActionsRef;
+      var keys = rowSelection.dftSelectedRowKeys;
+      globalActionsRef.current.setSelectedRowKeys(keys);
+    }
+  });
+  return {
+    // 启用行选择
+    enableRowSelection: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.enableRowSelection) ? function enableRowSelection(row) {
+      var _a;
+      var tableValue = innerRef.current.subscription;
+      var rowData = tableValue.getValue()[row.index];
+      return (_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.enableRowSelection) === null || _a === void 0 ? void 0 : _a.call(rowSelection, rowData, {
+        row: row
+      });
+    } : true,
+    // 启用子行选择
+    enableSubRowSelection: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.enableSubRowSelection) ? function enableSubRowSelection(row) {
+      var _a;
+      var tableValue = innerRef.current.subscription;
+      var rowData = tableValue.getValue()[row.index];
+      return (_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.enableSubRowSelection) === null || _a === void 0 ? void 0 : _a.call(rowSelection, rowData, {
+        row: row
+      });
+    } : true,
+    // 单选模式下只允许选择一行
+    enableMultiRowSelection: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.type) !== 'radio',
+    // 选中状态变化时触发onChange
+    onRowSelectionChange: function onRowSelectionChange(updater) {
+      var _a;
+      if (!rowSelection) return;
+      var _innerRef$current = innerRef.current,
+        table = _innerRef$current.table,
+        rowSelectionState = _innerRef$current.rowSelectionState;
+      var state = table.getState().rowSelection;
+      var newState = typeof updater === 'function' ? updater(state) : updater;
+      // 如果行选择状态没有变化，则不更新
+      if (isEqual(state, newState)) return;
+      // 先同步到订阅上
+      var preState = rowSelectionState.getValue();
+      // #region generate next state
+      var nextState = {};
+      // 请勿感到迷惑，此处把 preState 的 key 全部拿出来设置一遍值
+      // 是因为取消选择时 newState 里是一个空对象，而不是 {[key]: false}，会导致状态丢失
+      for (var key in preState) {
+        nextState[key] = !!newState[key];
+      }
+      // 这里则是再加一步保险，确保 newState 的 key 全部设置一遍值
+      // 其实不加也无所谓，因为 newState 的 key 是来自 preState 的
+      for (var _key in newState) {
+        nextState[_key] = !!newState[_key];
+      }
+      // #endregion
+      rowSelectionState.mergeValue(nextState);
+      // 构造数据回传给外部
+      var _table$$getRowSelecti = table.$getRowSelection(newState),
+        selectedRows = _table$$getRowSelecti.selectedRows,
+        selectedRowKeys = _table$$getRowSelecti.selectedRowKeys,
+        selectedRowEntries = _table$$getRowSelecti.selectedRowEntries;
+      // 更新选中行原始数据的缓存，内部会做判断，仅在启用 preserveSelectedRows 时才更新
+      table.$updateSelectedRowsCache(selectedRowEntries);
+      // 最后再更新内部状态 // 最后再触发重渲染
+      table.setState(function (state) {
+        return Object.assign(Object.assign({}, state), {
+          rowSelection: newState
+        });
+      });
+      (_a = rowSelection.onChange) === null || _a === void 0 ? void 0 : _a.call(rowSelection, {
+        keys: selectedRowKeys,
+        rows: selectedRows
+      });
+    }
+  };
+}
+/** 如果开启了后端分页，并且没有配置 preserveSelectedRows，则需要在分页变化时清空选中状态 */
+function resetRowSelectionAfterPaginationChange(ctx) {
+  var _a;
+  var globalStaticRef = ctx.innerRef.current.globalStaticRef;
+  var enableAsyncData = globalStaticRef.current.enableAsyncData;
+  // 如果开启了后端分页，并且没有配置preserveSelectedRows，则需要清空选中状态
+  if (enableAsyncData) {
+    var propsRef = ctx.innerRef.current.propsRef;
+    var preserveSelectedRows = (_a = propsRef.current.rowSelection) === null || _a === void 0 ? void 0 : _a.preserveSelectedRows;
+    // 并且没有配置 preserveSelectedRows
+    if (!preserveSelectedRows) {
+      // 并且页数发生变化
+      var state = ctx.state,
+        newState = ctx.newState;
+      var hasPageIndexChanged = state.pageIndex !== newState.pageIndex;
+      // 则清空选中状态
+      if (hasPageIndexChanged) {
+        var table = ctx.innerRef.current.table;
+        table.setRowSelection({});
+      }
+    }
+  }
+}
+export { resetRowSelectionAfterPaginationChange, useRowSelectionOpts };

package/lib/esm/features/row-selection/hooks/use-set-selected-row-keys.js

@@ -0,0 +1,43 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useCallback } from 'react';
+import { isNil } from 'lodash-es';
+function useSetSelectedRowKeys(ctx) {
+  var innerRef = ctx.innerRef;
+  var setSelectedRowKeys = useCallback(function setSelectedRowKeys(keys) {
+    var table = innerRef.current.table;
+    // 传入 null 时，清空所有选中的行
+    if (keys === null) {
+      table.setRowSelection({});
+      return;
+    }
+    var nextKeys = Array.isArray(keys) ? keys :
+    // 如果 keys 是函数，则取出当前选中的全部行的ID
+    keys(Object.keys(table.getState().rowSelection));
+    // 函数返回 null 也可清空所有选中的行
+    if (nextKeys === null) {
+      table.setRowSelection({});
+      return;
+    }
+    // 只要不是 undefined 或者 null 都认为是有效的
+    var validKeys = nextKeys.filter(function (key) {
+      return !isNil(key);
+    });
+    if (validKeys.length === 0) return;
+    // 有效的key全部认为要被选中
+    var newState = Object.fromEntries(validKeys.map(function (key) {
+      return [key, true];
+    }));
+    // 设置行选择状态
+    table.setRowSelection(newState);
+  }, [innerRef]);
+  return setSelectedRowKeys;
+}
+export { useSetSelectedRowKeys };

package/lib/esm/features/row-selection/hooks/use-sync-hover-style.js

@@ -0,0 +1,81 @@
+/** @LICENSE
+ * @hi-ui/schema-editable-table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-editable-table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useRef, useEffect } from 'react';
+import { useEditableSchemaTableCtx } from '../../../ctx.js';
+import { cls } from '../../../utils/cls.js';
+import 'lodash-es';
+import '@tanstack/react-table';
+import 'ahooks';
+
+/**
+ * 同步表格行的 hover 状态
+ * @desc 当表格分为选择列和主内容两部分时，确保 hover 效果能同步显示在两边
+ */
+function useSyncHoverStyle() {
+  var _useEditableSchemaTab = useEditableSchemaTableCtx(),
+    tableContainerRef = _useEditableSchemaTab.tableContainerRef,
+    propsRef = _useEditableSchemaTab.propsRef;
+  var findClassName = "." + cls('body-row');
+  // 用ref存储上一次 hover 的行元素，避免不必要的DOM查询
+  var lastHoveredRowsRef = useRef(null);
+  useEffect(function () {
+    var _a;
+    if (!tableContainerRef.current) return;
+    // 只在开启行选择时启用 hover 同步
+    if (!((_a = propsRef.current) === null || _a === void 0 ? void 0 : _a.rowSelection)) return;
+    // // 如果开启了列分组，则不启用 hover 同步
+    // TODO 此处需进一步细化处理场景
+    // if (propsRef.current.grouping) return
+    var container = tableContainerRef.current;
+    var clearHover = function clearHover() {
+      if (lastHoveredRowsRef.current) {
+        lastHoveredRowsRef.current.forEach(function (el) {
+          return el.removeAttribute('data-hovering');
+        });
+        lastHoveredRowsRef.current = null;
+      }
+    };
+    var handleMouseMove = function handleMouseMove(e) {
+      var _a, _b;
+      // 查找当前 hover 的行元素
+      var row = e.target.closest(findClassName);
+      // 如果没有找到行元素，清除上一次的 hover 状态
+      if (!row) return clearHover();
+      var rowId = row.getAttribute('data-id');
+      if (!rowId) return;
+      // 如果 hover 的是同一行，不做任何操作
+      if (((_b = (_a = lastHoveredRowsRef.current) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getAttribute('data-id')) === rowId) {
+        return;
+      }
+      // 清除上一次 hover 的行
+      clearHover();
+      // 找到所有相同 id 的行并添加 hover 状态
+      var currentRows = Array.from(container.querySelectorAll("tr[data-id=\"" + rowId + "\"]"));
+      currentRows.forEach(function (el) {
+        return el.setAttribute('data-hovering', '');
+      });
+      lastHoveredRowsRef.current = currentRows;
+    };
+    // 鼠标离开表格时清除所有 hover 状态
+    var handleMouseLeave = function handleMouseLeave() {
+      return clearHover();
+    };
+    container.addEventListener('mousemove', handleMouseMove);
+    container.addEventListener('mouseleave', handleMouseLeave);
+    return function () {
+      // 清理事件监听
+      container.removeEventListener('mousemove', handleMouseMove);
+      container.removeEventListener('mouseleave', handleMouseLeave);
+      // 组件卸载时清除所有hover状态
+      clearHover();
+    };
+  }, [tableContainerRef, propsRef, findClassName]);
+}
+export { useSyncHoverStyle };