@sheinx/base 3.7.0-beta.9 → 3.7.0

package/esm/skeleton/button.js

@@ -0,0 +1,27 @@
+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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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); }
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Button(_ref) {
+  var classes = _ref.classes,
+    className = _ref.className,
+    size = _ref.size,
+    position = _ref.position,
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 1 : _ref$count,
+    style = _ref.style;
+  var cls = classNames(classes.button, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.buttonLeft, position !== 'right'), classes.buttonRight, position === 'right'), classes.buttonSmall, size === 'small'), classes.buttonLarge, size === 'large'), className);
+  var buttons = [];
+  for (var i = 0; i < count; i++) {
+    buttons.push( /*#__PURE__*/_jsx("div", {
+      className: classes.buttonItem
+    }, i));
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: cls,
+    style: style,
+    children: buttons
+  });
+}

package/esm/skeleton/image.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SkeletonClasses, SkeletonImageProps } from './skeleton.type';
+interface ImageProps extends SkeletonImageProps {
+    classes: SkeletonClasses;
+}
+export default function Image({ classes, className, size, position, shape, style }: ImageProps): JSX.Element;
+export {};
+//# sourceMappingURL=image.d.ts.map

package/esm/skeleton/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["image.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEtE,UAAU,UAAW,SAAQ,kBAAkB;IAC7C,OAAO,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAgB,EAAE,KAAK,EAAE,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAWtH"}

package/esm/skeleton/image.js

@@ -0,0 +1,20 @@
+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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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); }
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Image(_ref) {
+  var classes = _ref.classes,
+    className = _ref.className,
+    size = _ref.size,
+    position = _ref.position,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
+    style = _ref.style;
+  var cls = classNames(classes.image, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.imageLeft, position !== 'right'), classes.imageRight, position === 'right'), classes.imageCircle, shape === 'circle'), classes.imageSquare, shape === 'square'), classes.imageSmall, size === 'small'), classes.imageLarge, size === 'large'), className);
+  return /*#__PURE__*/_jsx("div", {
+    className: cls,
+    style: style
+  });
+}

package/esm/skeleton/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as Skeleton } from './skeleton';
+export type { SkeletonProps, SkeletonClasses } from './skeleton.type';
+//# sourceMappingURL=index.d.ts.map

package/esm/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}

package/esm/skeleton/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { default, default as Skeleton } from "./skeleton";

package/esm/skeleton/skeleton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SkeletonProps } from './skeleton.type';
+declare const Skeleton: (props: SkeletonProps) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export default Skeleton;
+//# sourceMappingURL=skeleton.d.ts.map

package/esm/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["skeleton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAmB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AASjE,QAAA,MAAM,QAAQ,UAAW,aAAa,iIA6BrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/skeleton/skeleton.js

@@ -0,0 +1,52 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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); }
+import { util } from '@sheinx/hooks';
+import classNames from 'classnames';
+import Text from "./text";
+import Image from "./image";
+import Button from "./button";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function getComponentProps(prop) {
+  return util.isObject(prop) ? prop : {};
+}
+var Skeleton = function Skeleton(props) {
+  var _jssStyle$skeleton;
+  var animation = props.animation,
+    image = props.image,
+    button = props.button,
+    _props$text = props.text,
+    text = _props$text === void 0 ? true : _props$text,
+    children = props.children,
+    loading = props.loading,
+    jssStyle = props.jssStyle;
+  var classes = jssStyle === null || jssStyle === void 0 || (_jssStyle$skeleton = jssStyle.skeleton) === null || _jssStyle$skeleton === void 0 ? void 0 : _jssStyle$skeleton.call(jssStyle);
+  var rootClass = classNames(classes.rootClass, classes.wrapper, props.className, _defineProperty({}, classes.animation, animation));
+  var imageProps = getComponentProps(image);
+  var textProps = getComponentProps(text);
+  var buttonProps = getComponentProps(button);
+  if (loading) {
+    return /*#__PURE__*/_jsxs("div", {
+      className: rootClass,
+      style: props.style,
+      children: [image && imageProps.position !== 'right' && /*#__PURE__*/_jsx(Image, _objectSpread({
+        classes: classes
+      }, imageProps)), /*#__PURE__*/_jsxs("div", {
+        className: classes.content,
+        children: [text && /*#__PURE__*/_jsx(Text, _objectSpread({
+          classes: classes
+        }, textProps)), button && /*#__PURE__*/_jsx(Button, _objectSpread({
+          classes: classes
+        }, buttonProps))]
+      }), image && imageProps.position === 'right' && /*#__PURE__*/_jsx(Image, _objectSpread({
+        classes: classes
+      }, imageProps))]
+    });
+  }
+  return children;
+};
+export default Skeleton;

package/esm/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/esm/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/esm/skeleton/skeleton.type.js

@@ -0,0 +1 @@
+export {};

package/esm/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/esm/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/esm/skeleton/text.js

@@ -0,0 +1,46 @@
+import classNames from 'classnames';
+import { util } from '@sheinx/hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default 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 = classNames(classes.text, className);
+  var nodes = [];
+  function getTextWidth(index) {
+    if (util.isArray(width)) {
+      return width[index];
+    }
+    if (rows - 1 === index) {
+      return width;
+    }
+    return undefined;
+  }
+  function getTextHeight(index) {
+    if (util.isArray(height)) {
+      return height[index];
+    }
+    if (rows - 1 === index) {
+      return height;
+    }
+    return undefined;
+  }
+  for (var i = 0; i < rows; i++) {
+    nodes.push( /*#__PURE__*/_jsx("li", {
+      className: classes.textItem,
+      style: {
+        width: getTextWidth(i),
+        height: getTextHeight(i)
+      }
+    }, i));
+  }
+  return /*#__PURE__*/_jsx("ul", {
+    className: cls,
+    style: style,
+    children: nodes
+  });
+}

package/esm/table/table.d.ts.map

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

package/esm/table/table.js

@@ -38,7 +38,7 @@ var emptyRef = {
   current: null
 };
 export default (function (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,
@@ -50,6 +50,7 @@ export default (function (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 = useRef(null);
   var theadRef = useRef(null);
+  var theadIdRef = useRef("thead-container-".concat(util.generateUUID()));
   var tfootRef = useRef(null);
   var scrollRef = useRef(null);
   var headMirrorScrollRef = useRef(null);
@@ -59,6 +60,10 @@ export default (function (props) {
     _useState2 = _slicedToArray(_useState, 2),
     scrolling = _useState2[0],
     setScrolling = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fakeVirtual = _useState4[0],
+    setFakeVirtual = _useState4[1];
   var browserScrollbarWidth = useScrollbarWidth();
   if (props.fixed) {
     devUseWarning.deprecated('fixed', 'virtual', 'Table');
@@ -85,7 +90,7 @@ export default (function (props) {
       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 = useResize({
@@ -216,7 +221,13 @@ export default (function (props) {
   });
   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 = useTableVirtual({
     disabled: !virtual,
@@ -232,10 +243,14 @@ export default (function (props) {
     theadAndTfootHeight: context.theadAndTfootHeight
   });
   var syncHeaderScroll = usePersistFn(function (left) {
-    var _theadRef$current2;
+    var _tableRef$current;
     if (props.hideHeader || !props.sticky) return;
-    if (!(theadRef !== null && theadRef !== void 0 && (_theadRef$current2 = theadRef.current) !== null && _theadRef$current2 !== void 0 && _theadRef$current2.parentElement)) return;
-    theadRef.current.parentElement.scrollLeft = left;
+
+    // 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;
+    });
   });
 
   // 简单表格的滚动事件
@@ -282,28 +297,33 @@ export default (function (props) {
     }, 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) {
+      var empty = props.empty !== undefined ? /*#__PURE__*/_jsx("span", {
+        children: props.empty
+      }) : /*#__PURE__*/_jsx(Empty, {
+        jssStyle: props.jssStyle
+      });
       return /*#__PURE__*/_jsx("div", {
         className: classNames(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.emptyWrapper, isScrollX && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.emptyNoBorder)),
         ref: function ref(el) {
           context.emptyHeight = (el === null || el === void 0 ? void 0 : el.clientHeight) || 0;
         },
-        children: props.empty || /*#__PURE__*/_jsx(Empty, {
-          jssStyle: props.jssStyle
-        })
+        children: empty
       });
     }
     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__*/_jsx(Colgroup, {
       colgroup: colgroup,
       columns: columns,
       shouldLastColAuto: !!shouldLastColAuto
     });
     var bodyCommonProps = {
+      virtual: props.virtual,
       hover: props.hover,
       disabled: props.disabled,
       rowClickAttr: props.rowClickAttr,
@@ -332,8 +352,7 @@ export default (function (props) {
       bodyScrollWidth: scrollWidth,
       resizeFlag: resizeFlag,
       treeCheckAll: props.treeCheckAll,
-      onCellClick: props.onCellClick,
-      shouldCellUpdate: props.shouldCellUpdate
+      onCellClick: props.onCellClick
     };
     var headCommonProps = {
       disabled: props.disabled,
@@ -373,16 +392,22 @@ export default (function (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 = classNames(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 = classNames(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.headWrapper, !!$empty && tableClasses.emptyHeader, props.sticky && isScrollY && tableClasses.scrollY, props.sticky && !isScrollY && tableClasses.scrollX);
     var footWrapperClass = classNames(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;
       // 开启了双滚，但是没有滚动条，不显示
@@ -407,7 +432,7 @@ export default (function (props) {
           ref: headMirrorScrollRef,
           children: /*#__PURE__*/_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
             }
           })
@@ -415,17 +440,16 @@ export default (function (props) {
       }));
     };
     var renderBottomMirrorScroller = function renderBottomMirrorScroller() {
-      var _scrollRef$current4, _scrollRef$current5, _scrollRef$current6;
+      var _scrollRef$current5, _scrollRef$current6, _scrollRef$current7;
       if (!props.showBottomScrollbar) return null;
-      var scrollRefWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.clientWidth) || 0;
-      var scrollRefScrollWidth = (scrollRef === null || scrollRef === void 0 || (_scrollRef$current5 = scrollRef.current) === null || _scrollRef$current5 === void 0 ? void 0 : _scrollRef$current5.scrollWidth) || 0;
+      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 = {
-        scrollContainer: options.scrollContainer || document.body,
         bottom: options.bottom || 0,
         zIndex: options.zIndex || defaultZIndex + 1,
         parent: tableRef === null || tableRef === void 0 ? void 0 : tableRef.current
@@ -447,31 +471,32 @@ export default (function (props) {
           ref: bottomMirrorScrollRef,
           children: /*#__PURE__*/_jsx("div", {
             style: {
-              width: scrollRef === null || scrollRef === void 0 || (_scrollRef$current6 = scrollRef.current) === null || _scrollRef$current6 === void 0 ? void 0 : _scrollRef$current6.scrollWidth,
+              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__*/_jsxs("table", {
-      style: {
-        width: width
-      },
-      ref: theadRef,
-      children: [Group, /*#__PURE__*/_jsx(Thead, _objectSpread({}, headCommonProps))]
-    });
+    var $headTable = /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+      className: headWrapperClass
+    }, util.getDataAttribute({
+      role: theadIdRef.current
+    })), {}, {
+      children: /*#__PURE__*/_jsxs("table", {
+        style: {
+          width: width
+        },
+        ref: theadRef,
+        children: [Group, /*#__PURE__*/_jsx(Thead, _objectSpread({}, headCommonProps))]
+      })
+    }));
     if (isRenderVirtualTable) {
-      var _props$data4;
+      var _props$data3;
+      var showStickyHeader = !props.hideHeader && props.sticky;
       return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [renderHeadMirrorScroller(), !props.hideHeader && props.sticky && /*#__PURE__*/_jsx(StickyWrapper, _objectSpread(_objectSpread({}, stickyProps), {}, {
-          children: /*#__PURE__*/_jsx("div", {
-            className: headWrapperClass,
-            style: {
-              overflow: 'hidden'
-            },
-            children: $headTable
-          })
+        children: [renderHeadMirrorScroller(), showStickyHeader && /*#__PURE__*/_jsx(StickyWrapper, _objectSpread(_objectSpread({}, stickyProps), {}, {
+          children: $headTable
         })), /*#__PURE__*/_jsxs(Scroll, {
           style: {
             display: 'flex',
@@ -485,10 +510,11 @@ export default (function (props) {
           onScroll: handleVirtualScroll,
           defaultHeight: context.emptyHeight,
           isScrollY: isScrollY,
-          children: [!props.hideHeader && !props.sticky && /*#__PURE__*/_jsx("div", {
-            className: headWrapperClass,
-            children: $headTable
-          }), !!((_props$data4 = props.data) !== null && _props$data4 !== void 0 && _props$data4.length) && /*#__PURE__*/_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__*/_jsxs("table", {
             style: {
               width: width,
               transform: virtualInfo.translateStyle
@@ -509,7 +535,7 @@ export default (function (props) {
               ref: tfootRef,
               children: [Group, /*#__PURE__*/_jsx(Tfoot, _objectSpread({}, footCommonProps))]
             })
-          }) : null, renderEmpty()]
+          }) : null, $empty]
         }), renderBottomMirrorScroller()]
       });
     }
@@ -525,7 +551,7 @@ export default (function (props) {
           ref: tbodyRef,
           children: [Group, !props.hideHeader && /*#__PURE__*/_jsx(Thead, _objectSpread({}, headCommonProps)), bodyCommonProps.data.length === 0 ? /*#__PURE__*/_jsx(TbodyEmpty, {
             children: renderEmpty()
-          }) : /*#__PURE__*/_jsx(Tbody, _objectSpread({}, bodyCommonProps)), /*#__PURE__*/_jsx(Tfoot, _objectSpread({}, footCommonProps))]
+          }) : /*#__PURE__*/_jsx(Tbody, _objectSpread({}, bodyCommonProps)), showFoot && /*#__PURE__*/_jsx(Tfoot, _objectSpread({}, footCommonProps))]
         })
       }), renderBottomMirrorScroller()]
     });
@@ -550,10 +576,10 @@ export default (function (props) {
 
   // handle head and  foot scroll
   var handleHeaderWheel = usePersistFn(function (e) {
-    var _theadRef$current3;
+    var _theadRef$current2;
     var scrollEl = scrollRef.current;
     if (!scrollEl) return;
-    if (!(theadRef !== null && theadRef !== void 0 && (_theadRef$current3 = theadRef.current) !== null && _theadRef$current3 !== void 0 && _theadRef$current3.parentElement)) 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) {
@@ -564,6 +590,12 @@ export default (function (props) {
     scrollEl.scrollLeft = left;
     theadRef.current.parentElement.scrollLeft = left;
   });
+  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]);
   useEffect(function () {
     // 绑定 wheel 事件
     if (props.sticky && theadRef.current && theadRef.current.parentElement) {