@sheinx/base 3.7.0-beta.4 → 3.7.0-beta.40

package/cjs/skeleton/skeleton.type.d.ts

@@ -0,0 +1,125 @@
+/// <reference types="react" />
+import { CommonType } from '../common/type';
+export interface SkeletonClasses {
+    rootClass: string;
+    wrapper: string;
+    content: string;
+    animation: string;
+    text: string;
+    textItem: string;
+    button: string;
+    buttonItem: string;
+    buttonLeft: string;
+    buttonRight: string;
+    buttonSmall: string;
+    buttonLarge: string;
+    image: string;
+    imageLeft: string;
+    imageRight: string;
+    imageCircle: string;
+    imageSquare: string;
+    imageSmall: string;
+    imageLarge: string;
+}
+export interface SkeletonTextProps {
+    /**
+     * 文本行数
+     */
+    rows?: number;
+    /**
+     * 文本宽度
+     */
+    width?: string | number | Array<string | number>;
+    /**
+     * 文本高度
+     */
+    height?: number | Array<number>;
+    /**
+     * 自定义className
+     */
+    className?: string;
+    /**
+     * 自定义style
+     */
+    style?: React.CSSProperties;
+}
+export interface SkeletonImageProps {
+    /**
+     * 图片位置
+     */
+    position?: 'left' | 'right';
+    /**
+     * 图片形状
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * 图片大小，小尺寸-40px，默认-64px, 大尺寸-80px
+     */
+    size?: 'small' | 'default' | 'large';
+    /**
+     * 自定义className
+     */
+    className?: string;
+    /**
+     * 自定义style
+     */
+    style?: React.CSSProperties;
+}
+export interface SkeletonButtonProps {
+    /**
+     * 按钮位置
+     */
+    position?: 'left' | 'right';
+    /**
+     * 按钮数量
+     */
+    count?: number;
+    /**
+     * 按钮尺寸
+     */
+    size?: 'small' | 'default' | 'large';
+    /**
+     * 自定义className
+     */
+    className?: string;
+    /**
+     * 自定义style
+     */
+    style?: React.CSSProperties;
+}
+export interface SkeletonProps extends Pick<CommonType, 'className' | 'style'> {
+    jssStyle?: {
+        skeleton: () => SkeletonClasses;
+    };
+    /**
+     * @en Whether to enable animation effects
+     * @cn 是否开启动画效果
+     */
+    animation?: boolean;
+    /**
+     * @en Whether to load, when true, show the skeleton screen
+     * @cn 是否加载中，为true时，显示骨架屏
+     */
+    loading?: boolean;
+    /**
+     * @en Real content
+     * @cn 真实内容
+     */
+    children?: React.ReactNode;
+    /**
+     * @en Whether to show text
+     * @cn 是否显示文本或段落
+     */
+    text?: SkeletonTextProps | boolean;
+    /**
+     * @en Whether to show image
+     * @cn 是否显示图片
+     */
+    image?: SkeletonImageProps | boolean;
+    /**
+     * @en Whether to show button
+     * @cn 是否显示按钮
+     */
+    button?: SkeletonButtonProps | boolean;
+}
+//# sourceMappingURL=skeleton.type.d.ts.map

package/cjs/skeleton/skeleton.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.type.d.ts","sourceRoot":"","sources":["skeleton.type.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAElB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IAEjB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IAEpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACjD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC5E,QAAQ,CAAC,EAAE;QACT,QAAQ,EAAE,MAAM,eAAe,CAAC;KACjC,CAAC;IAEF;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;IAEnC;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,GAAG,OAAO,CAAC;IAErC;;;OAGG;IACH,MAAM,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;CACxC"}

package/cjs/skeleton/skeleton.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/skeleton/text.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SkeletonClasses, SkeletonTextProps } from './skeleton.type';
+interface TextProps extends SkeletonTextProps {
+    classes: SkeletonClasses;
+}
+export default function Text({ classes, className, rows, width, height, style }: TextProps): JSX.Element;
+export {};
+//# sourceMappingURL=text.d.ts.map

package/cjs/skeleton/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["text.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGrE,UAAU,SAAU,SAAQ,iBAAiB;IAC3C,OAAO,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CA8B3G"}

package/cjs/skeleton/text.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Text;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("@sheinx/hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Text(_ref) {
+  var classes = _ref.classes,
+    className = _ref.className,
+    _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? 3 : _ref$rows,
+    width = _ref.width,
+    height = _ref.height,
+    style = _ref.style;
+  var cls = (0, _classnames.default)(classes.text, className);
+  var nodes = [];
+  function getTextWidth(index) {
+    if (_hooks.util.isArray(width)) {
+      return width[index];
+    }
+    if (rows - 1 === index) {
+      return width;
+    }
+    return undefined;
+  }
+  function getTextHeight(index) {
+    if (_hooks.util.isArray(height)) {
+      return height[index];
+    }
+    if (rows - 1 === index) {
+      return height;
+    }
+    return undefined;
+  }
+  for (var i = 0; i < rows; i++) {
+    nodes.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      className: classes.textItem,
+      style: {
+        width: getTextWidth(i),
+        height: getTextHeight(i)
+      }
+    }, i));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+    className: cls,
+    style: style,
+    children: nodes
+  });
+}

package/cjs/sticky/sticky.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["sticky.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,eAAO,MAAM,aAAa,MAAM,CAAC;AAmBjC,QAAA,MAAM,MAAM,UAAW,WAAW,4CAoYjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["sticky.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,eAAO,MAAM,aAAa,MAAM,CAAC;AAmBjC,QAAA,MAAM,MAAM,UAAW,WAAW,4CAqYjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/cjs/sticky/sticky.js

@@ -414,12 +414,15 @@ var Sticky = function Sticky(props) {
     pointerEvents: 'none'
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [isFixed ? StickyEl : context.target && context.div && /*#__PURE__*/(0, _reactDom.createPortal)(StickyEl, context.div), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [isFixed ? StickyEl : context.target && context.div && /*#__PURE__*/(0, _reactDom.createPortal)(StickyEl, context.div), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
       className: props.className,
       style: _objectSpread(_objectSpread({}, props.style), show && parentVisible ? hideStyle : {}),
-      ref: handleElementRef,
+      ref: handleElementRef
+    }, _hooks.util.getDataAttribute({
+      sticky: show && parentVisible ? 'true' : 'false'
+    })), {}, {
       children: children
-    })]
+    }))]
   });
 };
 var _default = exports.default = Sticky;

package/cjs/sticky/sticky.type.d.ts

@@ -21,12 +21,12 @@ export interface StickyProps extends Pick<CommonType, 'className' | 'style'> {
     /**
      * @deprecated use scrollContainer
      */
-    target?: string | HTMLElement | null;
+    target?: string | Element | null;
     /**
      * @en Custom attachment target. You can pass in HTMLElement or css selector. The target must be an ancestor node of the Sticky component
      * @cn 自定义附着的目标。可以传入 HTMLElement 或者 css selector，target 必须为 Sticky 组件的祖先节点
      */
-    scrollContainer?: string | HTMLElement | null;
+    scrollContainer?: string | HTMLElement | Element | null;
     /**
      * @cn sticky 父级元素, 当父元素离开视窗时，sticky 将失效
      * @en sticky parent, when the parent element leaves the viewport, the sticky will be invalid

package/cjs/sticky/sticky.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky.type.d.ts","sourceRoot":"","sources":["sticky.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC1E,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IAEF;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IAErC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IAE9C;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
+{"version":3,"file":"sticky.type.d.ts","sourceRoot":"","sources":["sticky.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC1E,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IAEF;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;IAExD;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/cjs/table/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;AAe1C,wBAqhBE"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAgB,UAAU,EAAE,MAAM,cAAc,CAAC;;AAexD,wBAkqBE"}

package/cjs/table/table.js

@@ -33,13 +33,19 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var devUseWarning = _hooks.util.devUseWarning;
 var emptyArr = [];
 var emptyRef = {
   current: null
 };
 var _default = exports.default = function _default(props) {
-  var _props$jssStyle, _props$jssStyle$table, _props$data, _columns$find;
+  var _props$jssStyle, _props$jssStyle$table, _columns$find;
   var _props$verticalAlign = props.verticalAlign,
     verticalAlign = _props$verticalAlign === void 0 ? 'top' : _props$verticalAlign,
     _props$size = props.size,
@@ -51,10 +57,20 @@ var _default = exports.default = function _default(props) {
   var tableClasses = props === null || props === void 0 || (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$table = _props$jssStyle.table) === null || _props$jssStyle$table === void 0 ? void 0 : _props$jssStyle$table.call(_props$jssStyle);
   var tbodyRef = (0, _react.useRef)(null);
   var theadRef = (0, _react.useRef)(null);
+  var theadIdRef = (0, _react.useRef)("thead-container-".concat(_hooks.util.generateUUID()));
   var tfootRef = (0, _react.useRef)(null);
   var scrollRef = (0, _react.useRef)(null);
-  var mirrorScrollRef = (0, _react.useRef)(null);
+  var headMirrorScrollRef = (0, _react.useRef)(null);
+  var bottomMirrorScrollRef = (0, _react.useRef)(null);
   var tableRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrolling = _useState2[0],
+    setScrolling = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fakeVirtual = _useState4[0],
+    setFakeVirtual = _useState4[1];
   var browserScrollbarWidth = (0, _hooks.useScrollbarWidth)();
   if (props.fixed) {
     devUseWarning.deprecated('fixed', 'virtual', 'Table');
@@ -77,10 +93,11 @@ var _default = exports.default = function _default(props) {
   };
   var _useRef = (0, _react.useRef)({
       emptyHeight: 0,
-      theadAndTfootHeight: 0
+      theadAndTfootHeight: 0,
+      scrollingTimer: null
     }),
     context = _useRef.current;
-  var virtual = ((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.length) && props.rowsInView !== 0 && (!!props.virtual || props.fixed === 'both' || props.fixed === 'y' || props.fixed === 'auto');
+  var virtual = !fakeVirtual && props.rowsInView !== 0 && (!!props.virtual || props.fixed === 'both' || props.fixed === 'y' || props.fixed === 'auto');
 
   // 虚拟列表高度另外计算
   var _useResize = (0, _hooks.useResize)({
@@ -211,7 +228,13 @@ var _default = exports.default = function _default(props) {
   });
   (0, _react.useEffect)(function () {
     var _theadRef$current, _tfootRef$current;
-    context.theadAndTfootHeight = ((theadRef === null || theadRef === void 0 || (_theadRef$current = theadRef.current) === null || _theadRef$current === void 0 ? void 0 : _theadRef$current.clientHeight) || 0) + (((_tfootRef$current = tfootRef.current) === null || _tfootRef$current === void 0 ? void 0 : _tfootRef$current.clientHeight) || 0);
+    var theadHeight = (theadRef === null || theadRef === void 0 || (_theadRef$current = theadRef.current) === null || _theadRef$current === void 0 ? void 0 : _theadRef$current.clientHeight) || 0;
+    var tfootHeight = ((_tfootRef$current = tfootRef.current) === null || _tfootRef$current === void 0 ? void 0 : _tfootRef$current.clientHeight) || 0;
+    if (props.sticky) {
+      context.theadAndTfootHeight = tfootHeight;
+    } else {
+      context.theadAndTfootHeight = theadHeight + tfootHeight;
+    }
   }, [theadRef.current, tfootRef.current]);
   var virtualInfo = (0, _hooks.useTableVirtual)({
     disabled: !virtual,
@@ -226,14 +249,27 @@ var _default = exports.default = function _default(props) {
     isRtl: isRtl,
     theadAndTfootHeight: context.theadAndTfootHeight
   });
+  var syncHeaderScroll = (0, _hooks.usePersistFn)(function (left) {
+    var _tableRef$current;
+    if (props.hideHeader || !props.sticky) return;
+
+    // why use querySelectorAll: thead经历了Sticky组件的渲染再回来时，theadRef就丢失了
+    var theads = tableRef === null || tableRef === void 0 || (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelectorAll("[data-soui-role=".concat(theadIdRef.current, "]"));
+    theads === null || theads === void 0 || theads.forEach(function (item) {
+      item.scrollLeft = left;
+    });
+  });
 
   // 简单表格的滚动事件
   var handleBodyScroll = (0, _hooks.usePersistFn)(function (e) {
     var target = e.currentTarget;
     if (!target) return;
     layoutFunc.checkFloat();
-    if (mirrorScrollRef.current) {
-      mirrorScrollRef.current.scrollLeft = target.scrollLeft;
+    if (headMirrorScrollRef.current) {
+      headMirrorScrollRef.current.scrollLeft = target.scrollLeft;
+    }
+    if (bottomMirrorScrollRef.current) {
+      bottomMirrorScrollRef.current.scrollLeft = target.scrollLeft;
     }
     if (props.onScroll && typeof props.onScroll === 'function') {
       var maxWidth = target.scrollWidth - target.clientWidth;
@@ -242,22 +278,34 @@ var _default = exports.default = function _default(props) {
       var y = Math.min(target.scrollTop / maxHeight, 1);
       props.onScroll(x, y, target.scrollLeft, target.scrollTop);
     }
+    syncHeaderScroll(target.scrollLeft);
   });
 
   // 虚拟表格的滚动事件
   var handleVirtualScroll = (0, _hooks.usePersistFn)(function (info) {
     virtualInfo.handleScroll(info);
     layoutFunc.checkFloat();
-    if (mirrorScrollRef.current) {
-      mirrorScrollRef.current.scrollLeft = info.scrollLeft;
+    if (headMirrorScrollRef.current) {
+      headMirrorScrollRef.current.scrollLeft = info.scrollLeft;
+    }
+    if (bottomMirrorScrollRef.current) {
+      bottomMirrorScrollRef.current.scrollLeft = info.scrollLeft;
     }
     if (props.onScroll && typeof props.onScroll === 'function') {
       props.onScroll(info.x, info.y, info.scrollLeft, info.scrollTop);
     }
+    syncHeaderScroll(info.scrollLeft);
+    if (context.scrollingTimer) {
+      clearTimeout(context.scrollingTimer);
+    }
+    setScrolling(true);
+    context.scrollingTimer = setTimeout(function () {
+      setScrolling(false);
+    }, 100);
   });
   var renderEmpty = function renderEmpty() {
-    var _props$data2;
-    if (!((_props$data2 = props.data) !== null && _props$data2 !== void 0 && _props$data2.length) || filteredData !== undefined && filteredData.length === 0) {
+    var _props$data;
+    if (!((_props$data = props.data) !== null && _props$data !== void 0 && _props$data.length) || filteredData !== undefined && filteredData.length === 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classnames.default)(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.emptyWrapper, isScrollX && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.emptyNoBorder)),
         ref: function ref(el) {
@@ -270,14 +318,16 @@ var _default = exports.default = function _default(props) {
     }
     return null;
   };
+  var $empty = renderEmpty();
   var renderTable = function renderTable() {
-    var _props$summary, _sticky$top, _props$data3;
+    var _props$summary, _sticky$top, _props$data2;
     var Group = /*#__PURE__*/(0, _jsxRuntime.jsx)(_colgroup.default, {
       colgroup: colgroup,
       columns: columns,
       shouldLastColAuto: !!shouldLastColAuto
     });
     var bodyCommonProps = {
+      virtual: props.virtual,
       hover: props.hover,
       disabled: props.disabled,
       rowClickAttr: props.rowClickAttr,
@@ -346,16 +396,22 @@ var _default = exports.default = function _default(props) {
       target: sticky === null || sticky === void 0 ? void 0 : sticky.target,
       top: (_sticky$top = sticky === null || sticky === void 0 ? void 0 : sticky.top) !== null && _sticky$top !== void 0 ? _sticky$top : 0,
       css: sticky === null || sticky === void 0 ? void 0 : sticky.css,
-      parent: tableRef === null || tableRef === void 0 ? void 0 : tableRef.current
+      parent: tableRef === null || tableRef === void 0 ? void 0 : tableRef.current,
+      onChange: function onChange(isSticky) {
+        if (isSticky) {
+          var _scrollRef$current;
+          syncHeaderScroll(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollLeft) || 0);
+        }
+      }
     };
-    var isRenderVirtualTable = virtual || props.sticky || !((_props$data3 = props.data) !== null && _props$data3 !== void 0 && _props$data3.length);
-    var headWrapperClass = (0, _classnames.default)(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.headWrapper);
+    var isRenderVirtualTable = virtual || props.sticky || !((_props$data2 = props.data) !== null && _props$data2 !== void 0 && _props$data2.length);
+    var headWrapperClass = (0, _classnames.default)(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.headWrapper, !!$empty && tableClasses.emptyHeader, props.sticky && isScrollY && tableClasses.scrollY, props.sticky && !isScrollY && tableClasses.scrollX);
     var footWrapperClass = (0, _classnames.default)(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.footWrapper);
     var renderHeadMirrorScroller = function renderHeadMirrorScroller() {
-      var _scrollRef$current, _scrollRef$current2, _scrollRef$current3;
+      var _scrollRef$current2, _scrollRef$current3, _scrollRef$current4;
       if (!props.showTopScrollbar) return null;
-      var scrollRefWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.clientWidth) || 0;
-      var scrollRefScrollWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollWidth) || 0;
+      var scrollRefWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientWidth) || 0;
+      var scrollRefScrollWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth) || 0;
       var mirrorScrollRefWidth = scrollRefWidth + scrollBarWidth;
       var showScroll = scrollRefScrollWidth > scrollRefWidth;
       // 开启了双滚，但是没有滚动条，不显示
@@ -366,7 +422,7 @@ var _default = exports.default = function _default(props) {
       });
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StickyWrapper, _objectSpread(_objectSpread({}, props.sticky ? scrollerStickyProps : {}), {}, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.headMirrorScroller,
+          className: tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.mirrorScroller,
           style: {
             height: browserScrollbarWidth,
             width: mirrorScrollRefWidth
@@ -377,48 +433,102 @@ var _default = exports.default = function _default(props) {
               scrollRef.current.scrollLeft = target.scrollLeft;
             }
           },
-          ref: mirrorScrollRef,
+          ref: headMirrorScrollRef,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             style: {
-              width: scrollRef === null || scrollRef === void 0 || (_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth,
+              width: scrollRef === null || scrollRef === void 0 || (_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.scrollWidth,
               height: 1
             }
           })
         })
       }));
     };
+    var renderBottomMirrorScroller = function renderBottomMirrorScroller() {
+      var _scrollRef$current5, _scrollRef$current6, _scrollRef$current7;
+      if (!props.showBottomScrollbar) return null;
+      var scrollRefWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.clientWidth) || 0;
+      var scrollRefScrollWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current6 = scrollRef.current) === null || _scrollRef$current6 === void 0 ? void 0 : _scrollRef$current6.scrollWidth) || 0;
+      var mirrorScrollRefWidth = scrollRefWidth + scrollBarWidth;
+      var showScroll = scrollRefScrollWidth > scrollRefWidth;
+      // 开启了双滚，但是没有滚动条，不显示
+      if (!scrollRefWidth || !mirrorScrollRefWidth || !showScroll) return null;
+      var options = props.showBottomScrollbar === true ? {} : props.showBottomScrollbar;
+      var scrollerStickyProps = {
+        bottom: options.bottom || 0,
+        zIndex: options.zIndex || _sticky.defaultZIndex + 1,
+        parent: tableRef === null || tableRef === void 0 ? void 0 : tableRef.current
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sticky.default, _objectSpread(_objectSpread({}, scrollerStickyProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.mirrorScroller,
+          style: {
+            height: browserScrollbarWidth,
+            width: mirrorScrollRefWidth,
+            marginTop: -browserScrollbarWidth
+          },
+          onScroll: function onScroll(e) {
+            var target = e.currentTarget;
+            if (scrollRef !== null && scrollRef !== void 0 && scrollRef.current && scrollRef.current.scrollLeft !== target.scrollLeft) {
+              scrollRef.current.scrollLeft = target.scrollLeft;
+            }
+          },
+          ref: bottomMirrorScrollRef,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              width: scrollRef === null || scrollRef === void 0 || (_scrollRef$current7 = scrollRef.current) === null || _scrollRef$current7 === void 0 ? void 0 : _scrollRef$current7.scrollWidth,
+              height: 1
+            }
+          })
+        })
+      }));
+    };
+    var $headTable = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+      className: headWrapperClass
+    }, _hooks.util.getDataAttribute({
+      role: theadIdRef.current
+    })), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+        style: {
+          width: width
+        },
+        ref: theadRef,
+        children: [Group, /*#__PURE__*/(0, _jsxRuntime.jsx)(_thead.default, _objectSpread({}, headCommonProps))]
+      })
+    }));
     if (isRenderVirtualTable) {
-      var _props$data4, _props$data5;
+      var _props$data3;
+      var showStickyHeader = !props.hideHeader && props.sticky;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [renderHeadMirrorScroller(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_scrollTable.default, {
+        children: [renderHeadMirrorScroller(), showStickyHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(StickyWrapper, _objectSpread(_objectSpread({}, stickyProps), {}, {
+          children: $headTable
+        })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_scrollTable.default, {
+          style: {
+            display: 'flex',
+            minWidth: 0,
+            minHeight: 0,
+            flex: 1
+          },
           wrapperRef: scrollRef,
           scrollWidth: width || 1,
           scrollHeight: virtual ? virtualInfo.scrollHeight : tbodyHeight,
           onScroll: handleVirtualScroll,
           defaultHeight: context.emptyHeight,
           isScrollY: isScrollY,
-          isEmptyContent: !((_props$data4 = props.data) !== null && _props$data4 !== void 0 && _props$data4.length),
-          children: [!props.hideHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(StickyWrapper, _objectSpread(_objectSpread({}, props.sticky ? stickyProps : {}), {}, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: headWrapperClass,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
-                style: {
-                  width: width
-                },
-                ref: theadRef,
-                children: [Group, /*#__PURE__*/(0, _jsxRuntime.jsx)(_thead.default, _objectSpread({}, headCommonProps))]
-              })
-            })
-          })), !!((_props$data5 = props.data) !== null && _props$data5 !== void 0 && _props$data5.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+          isScrollX: isScrollX,
+          isEmpty: !!$empty,
+          tableRef: tableRef,
+          setFakeVirtual: setFakeVirtual,
+          children: [!props.hideHeader && !props.sticky && $headTable, !!((_props$data3 = props.data) !== null && _props$data3 !== void 0 && _props$data3.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
             style: {
               width: width,
-              transform: virtualInfo.getTranslate()
+              transform: virtualInfo.translateStyle
             },
             ref: tbodyRef,
             children: [Group, /*#__PURE__*/(0, _jsxRuntime.jsx)(_tbody.default, _objectSpread(_objectSpread({}, bodyCommonProps), {}, {
               currentIndex: virtualInfo.startIndex,
               data: virtualInfo.data,
-              setRowHeight: virtualInfo.setRowHeight
+              setRowHeight: virtualInfo.setRowHeight,
+              scrolling: scrolling
             }))]
           }), showFoot ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: footWrapperClass,
@@ -429,8 +539,8 @@ var _default = exports.default = function _default(props) {
               ref: tfootRef,
               children: [Group, /*#__PURE__*/(0, _jsxRuntime.jsx)(_tfoot.default, _objectSpread({}, footCommonProps))]
             })
-          }) : null, renderEmpty()]
-        })]
+          }) : null, $empty]
+        }), renderBottomMirrorScroller()]
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -445,9 +555,9 @@ var _default = exports.default = function _default(props) {
           ref: tbodyRef,
           children: [Group, !props.hideHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(_thead.default, _objectSpread({}, headCommonProps)), bodyCommonProps.data.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tbodyEmpty.default, {
             children: renderEmpty()
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tbody.default, _objectSpread({}, bodyCommonProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tfoot.default, _objectSpread({}, footCommonProps))]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tbody.default, _objectSpread({}, bodyCommonProps)), showFoot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tfoot.default, _objectSpread({}, footCommonProps))]
         })
-      })]
+      }), renderBottomMirrorScroller()]
     });
   };
   var renderLoading = function renderLoading() {
@@ -467,6 +577,42 @@ var _default = exports.default = function _default(props) {
       align: "right"
     }, pagination), paginationInfo));
   };
+
+  // handle head and  foot scroll
+  var handleHeaderWheel = (0, _hooks.usePersistFn)(function (e) {
+    var _theadRef$current2;
+    var scrollEl = scrollRef.current;
+    if (!scrollEl) return;
+    if (!(theadRef !== null && theadRef !== void 0 && (_theadRef$current2 = theadRef.current) !== null && _theadRef$current2 !== void 0 && _theadRef$current2.parentElement)) return;
+    var max = scrollEl.scrollWidth - scrollEl.clientWidth;
+    var scrollLeft = scrollEl.scrollLeft + e.deltaX;
+    if (scrollLeft === scrollEl.scrollLeft) {
+      return;
+    }
+    e.preventDefault();
+    var left = Math.min(Math.max(scrollLeft, 0), max);
+    scrollEl.scrollLeft = left;
+    theadRef.current.parentElement.scrollLeft = left;
+  });
+  (0, _react.useEffect)(function () {
+    var _scrollRef$current8;
+    if (!props.sticky || !scrollRef.current || !isScrollX) return;
+    // sticky场景下，从空数据到有数据切换时，同步一次滚动条的位置
+    syncHeaderScroll(((_scrollRef$current8 = scrollRef.current) === null || _scrollRef$current8 === void 0 ? void 0 : _scrollRef$current8.scrollLeft) || 0);
+  }, [isScrollX, props.sticky, $empty]);
+  (0, _react.useEffect)(function () {
+    // 绑定 wheel 事件
+    if (props.sticky && theadRef.current && theadRef.current.parentElement) {
+      theadRef.current.parentElement.addEventListener('wheel', handleHeaderWheel, {
+        passive: false
+      });
+    }
+    return function () {
+      if (props.sticky && theadRef.current && theadRef.current.parentElement) {
+        theadRef.current.parentElement.removeEventListener('wheel', handleHeaderWheel);
+      }
+    };
+  }, [theadRef.current, props.sticky, isScrollY]);
   var getRenderIndexByData = function getRenderIndexByData(data) {
     var originKey = typeof data === 'string' ? data : _hooks.util.getKey(props.keygen, data);
     var index = treeData.findIndex(function (item) {
@@ -502,7 +648,7 @@ var _default = exports.default = function _default(props) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
-      className: (0, _classnames.default)(tableWrapperClass, floatLeft && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.floatLeft), floatRight && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.floatRight), props.sticky && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.sticky)),
+      className: (0, _classnames.default)(tableWrapperClass, _defineProperty(_defineProperty(_defineProperty({}, tableClasses.sticky, props.sticky), tableClasses.floatLeft, floatLeft), tableClasses.floatRight, floatRight)),
       style: _objectSpread({
         height: defaultHeight
       }, props.style)