@sheinx/base 3.1.14 → 3.1.15

package/cjs/card/card-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card-header.d.ts","sourceRoot":"","sources":["card-header.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,QAAA,MAAM,UAAU,UAAW,eAAe,gBA2CzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"card-header.d.ts","sourceRoot":"","sources":["card-header.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,QAAA,MAAM,UAAU,UAAW,eAAe,gBAiDzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/cjs/card/card-header.js

@@ -31,11 +31,12 @@ var CardHeader = function CardHeader(props) {
       })
     });
   };
-  var headerContentClassName = (0, _classnames.default)(cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.headerContent, align === 'center' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.center), align === 'right' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.right));
+  var alignClass = (0, _classnames.default)(align === 'center' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.center), align === 'right' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.right));
+  var headerContentClassName = (0, _classnames.default)(cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.headerContent, alignClass);
   if (!props.extra && !collapsible) {
+    var simpleHeaderClassName = (0, _classnames.default)(cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.header, cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.simpleHeader, alignClass, props.className);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)(cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.header, cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.simpleHeader, props.className),
-      style: props.style,
+      className: simpleHeaderClassName,
       children: props.children
     });
   }

package/cjs/select/result.js

@@ -287,8 +287,8 @@ var Result = function Result(props) {
   var handleResetMore = function handleResetMore() {
     if (!compressed) return;
     if (isCompressedBound()) return;
-    setMore(-1);
     setShouldResetMore(true);
+    setMore(-1);
   };
   (0, _react.useEffect)(function () {
     if (!focus && mounted.current) {
@@ -299,11 +299,11 @@ var Result = function Result(props) {
     }
     mounted.current = true;
   }, [focus]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     setTimeout(handleResetMore);
   }, [valueProp, data]);
-  (0, _react.useEffect)(function () {
-    if (shouldResetMore && more === -1 && compressed && resultRef.current && (props.value || [].length)) {
+  (0, _react.useLayoutEffect)(function () {
+    if (shouldResetMore && more === -1 && compressed && resultRef.current && (props.value || []).length) {
       var tagClassName = ".".concat(styles.tag.split(' ')[0]);
       if (shouldResetMore && isArray(value) && (value || []).length) {
         var newMore = (0, _resultMore.getResetMore)(showInput, resultRef.current, resultRef.current.querySelectorAll(tagClassName));

package/cjs/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["select.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAqB,MAAM,eAAe,CAAC;AAkBnE,iBAAS,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,CAAC,QAAQ,EAAE,KAAK,CAAC,eAmtBxE;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["select.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAqB,MAAM,eAAe,CAAC;AAkBnE,iBAAS,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,CAAC,QAAQ,EAAE,KAAK,CAAC,eA0sBxE;AAED,eAAe,MAAM,CAAC"}

package/cjs/select/select.js

@@ -252,16 +252,6 @@ function Select(props0) {
     }),
     groupData = _useGroup.data,
     groupKey = _useGroup.groupKey;
-
-  // const triggerOpen = usePersistFn(() => {
-  //   if (disabled === true) return;
-  //   if (open) {
-  //     closePop();
-  //   } else {
-  //     openPop();
-  //   }
-  // });
-
   var focusAndOpen = function focusAndOpen() {
     if (!focused) {
       var _inputRef$current2;
@@ -668,7 +658,7 @@ function Select(props0) {
     children: [tipNode, renderResult(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_absoluteList.AbsoluteList, {
       adjust: true,
       focus: open,
-      fixedWidth: autoAdapt ? 'min' : true,
+      fixedWidth: !props.columns && (autoAdapt ? 'min' : true),
       absolute: props.absolute,
       zIndex: props.zIndex,
       position: position,

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;AAsB5C,QAAA,MAAM,MAAM,UAAW,WAAW,gBAmPjC,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;AAuB5C,QAAA,MAAM,MAAM,UAAW,WAAW,gBAqTjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/cjs/sticky/sticky.js

@@ -25,6 +25,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var cssSupport = _hooks.util.cssSupport;
 var supportSticky = cssSupport('position', 'sticky');
 var defaultZIndex = 900;
+var events = ['scroll', 'pageshow', 'load', 'resize'];
 
 // const getFirstScrollParent = (el: HTMLElement) => {
 //   let parent = el.parentNode as HTMLElement;
@@ -43,7 +44,6 @@ var defaultZIndex = 900;
 // };
 
 var Sticky = function Sticky(props) {
-  var _props$style;
   var children = props.children,
     top = props.top,
     bottom = props.bottom;
@@ -53,7 +53,8 @@ var Sticky = function Sticky(props) {
       div: null,
       observer: null,
       parentObserver: null,
-      isTop: false
+      isTop: false,
+      bodyObserver: null
     }),
     context = _useRef.current;
   var _useState = (0, _react.useState)({}),
@@ -70,10 +71,6 @@ var Sticky = function Sticky(props) {
     setParentVisible = _useState6[1];
   var forceRender = (0, _hooks.useRender)();
   var elementRef = (0, _react.useRef)(null);
-  var elementSize = (0, _hooks.useResize)({
-    targetRef: elementRef,
-    timer: 0
-  });
   var getTarget = function getTarget() {
     var scrollContainer = props.scrollContainer;
     if (typeof scrollContainer === 'string') {
@@ -83,11 +80,10 @@ var Sticky = function Sticky(props) {
     if (scrollContainer && scrollContainer.nodeType === 1) {
       return scrollContainer;
     }
-    return document.body;
+    return null;
   };
   var updateStyle = (0, _hooks.usePersistFn)(function () {
     if (context.div && !context.isTop && show) {
-      var shouldFixed = context.target === document.body;
       var scrollRect = context.target.getBoundingClientRect();
       var targetRect = elementRef.current.getBoundingClientRect();
       var targetLeft = targetRect.left;
@@ -96,7 +92,7 @@ var Sticky = function Sticky(props) {
       if (typeof bottom === 'number') {
         var outRootRect = context.target.getBoundingClientRect();
         var _style = {
-          position: shouldFixed ? 'fixed' : 'absolute',
+          position: 'absolute',
           width: "".concat(width, "px"),
           height: "".concat(height, "px"),
           top: "".concat(scrollRect.bottom - (props.bottom || 0) - outRootRect.top, "px"),
@@ -107,19 +103,13 @@ var Sticky = function Sticky(props) {
       }
     }
   });
-  var handlePosition = (0, _hooks.usePersistFn)(function (entries) {
+  var handleTargetPosition = (0, _hooks.usePersistFn)(function (entries) {
     var entry = entries[0];
     var scrollRect = entry.rootBounds;
     var targetRect = entry.boundingClientRect;
-    var shouldFixed = context.target === document.body;
     if (!entry.isIntersecting) {
       var targetLeft = targetRect.left;
-      var outRootRect = shouldFixed ? {
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0
-      } : context.div.getBoundingClientRect();
+      var outRootRect = context.div.getBoundingClientRect();
       var width = targetRect.width,
         height = targetRect.height;
       if (scrollRect && targetRect.bottom < scrollRect.bottom) {
@@ -128,7 +118,7 @@ var Sticky = function Sticky(props) {
         if (typeof top === 'number') {
           setShow(true);
           var _style2 = {
-            position: shouldFixed ? 'fixed' : 'absolute',
+            position: 'absolute',
             width: "".concat(width, "px"),
             height: "".concat(height, "px"),
             top: "".concat(scrollRect.top - outRootRect.top, "px"),
@@ -143,7 +133,7 @@ var Sticky = function Sticky(props) {
           setShow(true);
           var _outRootRect = context.target.getBoundingClientRect();
           var _style3 = {
-            position: shouldFixed ? 'fixed' : 'absolute',
+            position: 'absolute',
             width: "".concat(width, "px"),
             height: "".concat(height, "px"),
             top: "".concat(scrollRect.bottom - _outRootRect.top, "px"),
@@ -166,7 +156,58 @@ var Sticky = function Sticky(props) {
       setParentVisible(false);
     }
   });
-  var cleanEvents = function cleanEvents() {
+  var handleFixedPosition = (0, _hooks.usePersistFn)(function () {
+    var element = elementRef.current;
+    if (!element) return;
+    var selfRect = element.getBoundingClientRect();
+    if (selfRect === null) return;
+    // If the element is hidden, the width and height will be 0
+    if (selfRect && selfRect.width === 0 && selfRect.height === 0) return;
+    // const { marginBottom, marginTop } = getComputedStyle(element);
+    // selfRect.height += parseFloat(marginBottom) + parseFloat(marginTop);
+    var scrollElement = document.body;
+    var scrollRect = scrollElement.getBoundingClientRect();
+    var top = props.top,
+      bottom = props.bottom;
+    if (top !== undefined && Math.ceil(selfRect.top) <= top) {
+      setShow(true);
+      setStyle({
+        position: 'fixed',
+        top: top,
+        left: "".concat(selfRect.left, "px"),
+        width: "".concat(selfRect.width, "px")
+      });
+      return;
+    } else if (bottom !== undefined && Math.ceil(selfRect.bottom) + bottom > scrollRect.bottom) {
+      setShow(true);
+      setStyle({
+        position: 'fixed',
+        bottom: bottom,
+        left: "".concat(selfRect.left, "px"),
+        width: "".concat(selfRect.width, "px")
+      });
+      return;
+    } else {
+      setShow(false);
+    }
+  });
+  var elementSize = (0, _hooks.useResize)({
+    targetRef: elementRef,
+    timer: 0,
+    cb: handleFixedPosition
+  });
+  var createBodyObserver = function createBodyObserver() {
+    if (context.bodyObserver) {
+      context.bodyObserver.disconnect();
+    }
+    context.bodyObserver = new IntersectionObserver(handleFixedPosition, {
+      root: null,
+      rootMargin: "-".concat(top || 0, "px 0px -").concat(bottom || 0, "px 0px"),
+      threshold: 1.0
+    });
+    context.bodyObserver.observe(elementRef.current);
+  };
+  var cancelObserver = function cancelObserver() {
     if (context.observer) {
       context.observer.disconnect();
       context.observer = null;
@@ -175,18 +216,15 @@ var Sticky = function Sticky(props) {
       context.parentObserver.disconnect();
       context.parentObserver = null;
     }
-    window.removeEventListener('resize', updateStyle);
   };
-  var createObserver = function createObserver() {
-    var target = getTarget();
-    if (!context.div && target !== document.body) {
+  var createObserver = function createObserver(target) {
+    if (!context.div) {
       context.div = document.createElement('div');
       context.div.style.position = 'relative';
     }
-    if (target && target !== context.target) {
+    if (target) {
       forceRender();
-      context.target = target;
-      cleanEvents();
+      cancelObserver();
       if (context.div) {
         // append div
         if (target === document.body) {
@@ -204,7 +242,7 @@ var Sticky = function Sticky(props) {
         }
       }
       if (window.IntersectionObserver) {
-        var observer = new IntersectionObserver(handlePosition, {
+        var observer = new IntersectionObserver(handleTargetPosition, {
           root: target,
           rootMargin: "-".concat(top || 0, "px 0px -").concat(bottom || 0, "px 0px"),
           threshold: 1.0
@@ -227,17 +265,34 @@ var Sticky = function Sticky(props) {
     }
   };
   (0, _react.useEffect)(function () {
-    if (!css) {
-      createObserver();
+    if (css) return;
+    var target = getTarget();
+    context.target = target;
+    if (target) {
+      createObserver(target);
       window.addEventListener('resize', updateStyle);
+      return function () {
+        cancelObserver();
+        window.removeEventListener('resize', updateStyle);
+        if (context.div) {
+          context.div.remove();
+        }
+      };
+    } else {
+      // fixed 布局
+      createBodyObserver();
+      events.forEach(function (event) {
+        window.addEventListener(event, handleFixedPosition);
+      });
+      return function () {
+        if (context.bodyObserver) {
+          context.bodyObserver.disconnect();
+        }
+        events.forEach(function (event) {
+          window.removeEventListener(event, handleFixedPosition);
+        });
+      };
     }
-    return function () {
-      cleanEvents();
-      if (context.div) {
-        context.div.remove();
-        context.div = null;
-      }
-    };
   }, [css]);
   (0, _react.useEffect)(function () {
     if (props.parent && context.parentObserver) {
@@ -279,12 +334,14 @@ var Sticky = function Sticky(props) {
     })
   }) : null;
   var isFixed = style.position === 'fixed';
+  var hideStyle = {
+    opacity: 0,
+    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", {
       className: props.className,
-      style: _objectSpread(_objectSpread({}, props.style), {}, {
-        opacity: show && parentVisible ? 0 : (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.opacity
-      }),
+      style: _objectSpread(_objectSpread({}, props.style), show && parentVisible ? hideStyle : {}),
       ref: handleElementRef,
       children: children
     })]

package/cjs/virtual-scroll/scroll.js

@@ -46,7 +46,7 @@ var Scroll = function Scroll(props) {
     position: 'sticky'
   }, isRtl ? 'right' : 'left', 0), "top", 0);
   var placeStyle = _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    marginTop: Math.max(0, Math.floor(scrollHeight - height))
+    marginTop: height > 0 && scrollHeight > 0 ? Math.max(0, Math.floor(scrollHeight - height)) : 0
   }, "margin".concat(isRtl ? 'Left' : 'Right'), scrollWidth), "height", 0), "width", 0), "overflow", 'hidden');
   var handleScroll = (0, _hooks.usePersistFn)(function (e) {
     var target = e.currentTarget;

package/esm/card/card-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card-header.d.ts","sourceRoot":"","sources":["card-header.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,QAAA,MAAM,UAAU,UAAW,eAAe,gBA2CzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"card-header.d.ts","sourceRoot":"","sources":["card-header.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,QAAA,MAAM,UAAU,UAAW,eAAe,gBAiDzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/card/card-header.js

@@ -25,11 +25,12 @@ var CardHeader = function CardHeader(props) {
       })
     });
   };
-  var headerContentClassName = classNames(cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.headerContent, align === 'center' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.center), align === 'right' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.right));
+  var alignClass = classNames(align === 'center' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.center), align === 'right' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.right));
+  var headerContentClassName = classNames(cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.headerContent, alignClass);
   if (!props.extra && !collapsible) {
+    var simpleHeaderClassName = classNames(cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.header, cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.simpleHeader, alignClass, props.className);
     return /*#__PURE__*/_jsx("div", {
-      className: classNames(cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.header, cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.simpleHeader, props.className),
-      style: props.style,
+      className: simpleHeaderClassName,
       children: props.children
     });
   }

package/esm/select/result.js

@@ -10,7 +10,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
 import classNames from 'classnames';
 import { util, addResizeObserver } from '@sheinx/hooks';
 import Input from "./result-input";
@@ -279,8 +279,8 @@ var Result = function Result(props) {
   var handleResetMore = function handleResetMore() {
     if (!compressed) return;
     if (isCompressedBound()) return;
-    setMore(-1);
     setShouldResetMore(true);
+    setMore(-1);
   };
   useEffect(function () {
     if (!focus && mounted.current) {
@@ -291,11 +291,11 @@ var Result = function Result(props) {
     }
     mounted.current = true;
   }, [focus]);
-  useEffect(function () {
+  useLayoutEffect(function () {
     setTimeout(handleResetMore);
   }, [valueProp, data]);
-  useEffect(function () {
-    if (shouldResetMore && more === -1 && compressed && resultRef.current && (props.value || [].length)) {
+  useLayoutEffect(function () {
+    if (shouldResetMore && more === -1 && compressed && resultRef.current && (props.value || []).length) {
       var tagClassName = ".".concat(styles.tag.split(' ')[0]);
       if (shouldResetMore && isArray(value) && (value || []).length) {
         var newMore = getResetMore(showInput, resultRef.current, resultRef.current.querySelectorAll(tagClassName));

package/esm/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["select.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAqB,MAAM,eAAe,CAAC;AAkBnE,iBAAS,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,CAAC,QAAQ,EAAE,KAAK,CAAC,eAmtBxE;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["select.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAqB,MAAM,eAAe,CAAC;AAkBnE,iBAAS,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,CAAC,QAAQ,EAAE,KAAK,CAAC,eA0sBxE;AAED,eAAe,MAAM,CAAC"}

package/esm/select/select.js

@@ -245,16 +245,6 @@ function Select(props0) {
     }),
     groupData = _useGroup.data,
     groupKey = _useGroup.groupKey;
-
-  // const triggerOpen = usePersistFn(() => {
-  //   if (disabled === true) return;
-  //   if (open) {
-  //     closePop();
-  //   } else {
-  //     openPop();
-  //   }
-  // });
-
   var focusAndOpen = function focusAndOpen() {
     if (!focused) {
       var _inputRef$current2;
@@ -661,7 +651,7 @@ function Select(props0) {
     children: [tipNode, renderResult(), /*#__PURE__*/_jsx(AbsoluteList, {
       adjust: true,
       focus: open,
-      fixedWidth: autoAdapt ? 'min' : true,
+      fixedWidth: !props.columns && (autoAdapt ? 'min' : true),
       absolute: props.absolute,
       zIndex: props.zIndex,
       position: position,

package/esm/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;AAsB5C,QAAA,MAAM,MAAM,UAAW,WAAW,gBAmPjC,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;AAuB5C,QAAA,MAAM,MAAM,UAAW,WAAW,gBAqTjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/sticky/sticky.js

@@ -19,6 +19,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var cssSupport = util.cssSupport;
 var supportSticky = cssSupport('position', 'sticky');
 var defaultZIndex = 900;
+var events = ['scroll', 'pageshow', 'load', 'resize'];
 
 // const getFirstScrollParent = (el: HTMLElement) => {
 //   let parent = el.parentNode as HTMLElement;
@@ -37,7 +38,6 @@ var defaultZIndex = 900;
 // };
 
 var Sticky = function Sticky(props) {
-  var _props$style;
   var children = props.children,
     top = props.top,
     bottom = props.bottom;
@@ -47,7 +47,8 @@ var Sticky = function Sticky(props) {
       div: null,
       observer: null,
       parentObserver: null,
-      isTop: false
+      isTop: false,
+      bodyObserver: null
     }),
     context = _useRef.current;
   var _useState = useState({}),
@@ -64,10 +65,6 @@ var Sticky = function Sticky(props) {
     setParentVisible = _useState6[1];
   var forceRender = useRender();
   var elementRef = useRef(null);
-  var elementSize = useResize({
-    targetRef: elementRef,
-    timer: 0
-  });
   var getTarget = function getTarget() {
     var scrollContainer = props.scrollContainer;
     if (typeof scrollContainer === 'string') {
@@ -77,11 +74,10 @@ var Sticky = function Sticky(props) {
     if (scrollContainer && scrollContainer.nodeType === 1) {
       return scrollContainer;
     }
-    return document.body;
+    return null;
   };
   var updateStyle = usePersistFn(function () {
     if (context.div && !context.isTop && show) {
-      var shouldFixed = context.target === document.body;
       var scrollRect = context.target.getBoundingClientRect();
       var targetRect = elementRef.current.getBoundingClientRect();
       var targetLeft = targetRect.left;
@@ -90,7 +86,7 @@ var Sticky = function Sticky(props) {
       if (typeof bottom === 'number') {
         var outRootRect = context.target.getBoundingClientRect();
         var _style = {
-          position: shouldFixed ? 'fixed' : 'absolute',
+          position: 'absolute',
           width: "".concat(width, "px"),
           height: "".concat(height, "px"),
           top: "".concat(scrollRect.bottom - (props.bottom || 0) - outRootRect.top, "px"),
@@ -101,19 +97,13 @@ var Sticky = function Sticky(props) {
       }
     }
   });
-  var handlePosition = usePersistFn(function (entries) {
+  var handleTargetPosition = usePersistFn(function (entries) {
     var entry = entries[0];
     var scrollRect = entry.rootBounds;
     var targetRect = entry.boundingClientRect;
-    var shouldFixed = context.target === document.body;
     if (!entry.isIntersecting) {
       var targetLeft = targetRect.left;
-      var outRootRect = shouldFixed ? {
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0
-      } : context.div.getBoundingClientRect();
+      var outRootRect = context.div.getBoundingClientRect();
       var width = targetRect.width,
         height = targetRect.height;
       if (scrollRect && targetRect.bottom < scrollRect.bottom) {
@@ -122,7 +112,7 @@ var Sticky = function Sticky(props) {
         if (typeof top === 'number') {
           setShow(true);
           var _style2 = {
-            position: shouldFixed ? 'fixed' : 'absolute',
+            position: 'absolute',
             width: "".concat(width, "px"),
             height: "".concat(height, "px"),
             top: "".concat(scrollRect.top - outRootRect.top, "px"),
@@ -137,7 +127,7 @@ var Sticky = function Sticky(props) {
           setShow(true);
           var _outRootRect = context.target.getBoundingClientRect();
           var _style3 = {
-            position: shouldFixed ? 'fixed' : 'absolute',
+            position: 'absolute',
             width: "".concat(width, "px"),
             height: "".concat(height, "px"),
             top: "".concat(scrollRect.bottom - _outRootRect.top, "px"),
@@ -160,7 +150,58 @@ var Sticky = function Sticky(props) {
       setParentVisible(false);
     }
   });
-  var cleanEvents = function cleanEvents() {
+  var handleFixedPosition = usePersistFn(function () {
+    var element = elementRef.current;
+    if (!element) return;
+    var selfRect = element.getBoundingClientRect();
+    if (selfRect === null) return;
+    // If the element is hidden, the width and height will be 0
+    if (selfRect && selfRect.width === 0 && selfRect.height === 0) return;
+    // const { marginBottom, marginTop } = getComputedStyle(element);
+    // selfRect.height += parseFloat(marginBottom) + parseFloat(marginTop);
+    var scrollElement = document.body;
+    var scrollRect = scrollElement.getBoundingClientRect();
+    var top = props.top,
+      bottom = props.bottom;
+    if (top !== undefined && Math.ceil(selfRect.top) <= top) {
+      setShow(true);
+      setStyle({
+        position: 'fixed',
+        top: top,
+        left: "".concat(selfRect.left, "px"),
+        width: "".concat(selfRect.width, "px")
+      });
+      return;
+    } else if (bottom !== undefined && Math.ceil(selfRect.bottom) + bottom > scrollRect.bottom) {
+      setShow(true);
+      setStyle({
+        position: 'fixed',
+        bottom: bottom,
+        left: "".concat(selfRect.left, "px"),
+        width: "".concat(selfRect.width, "px")
+      });
+      return;
+    } else {
+      setShow(false);
+    }
+  });
+  var elementSize = useResize({
+    targetRef: elementRef,
+    timer: 0,
+    cb: handleFixedPosition
+  });
+  var createBodyObserver = function createBodyObserver() {
+    if (context.bodyObserver) {
+      context.bodyObserver.disconnect();
+    }
+    context.bodyObserver = new IntersectionObserver(handleFixedPosition, {
+      root: null,
+      rootMargin: "-".concat(top || 0, "px 0px -").concat(bottom || 0, "px 0px"),
+      threshold: 1.0
+    });
+    context.bodyObserver.observe(elementRef.current);
+  };
+  var cancelObserver = function cancelObserver() {
     if (context.observer) {
       context.observer.disconnect();
       context.observer = null;
@@ -169,18 +210,15 @@ var Sticky = function Sticky(props) {
       context.parentObserver.disconnect();
       context.parentObserver = null;
     }
-    window.removeEventListener('resize', updateStyle);
   };
-  var createObserver = function createObserver() {
-    var target = getTarget();
-    if (!context.div && target !== document.body) {
+  var createObserver = function createObserver(target) {
+    if (!context.div) {
       context.div = document.createElement('div');
       context.div.style.position = 'relative';
     }
-    if (target && target !== context.target) {
+    if (target) {
       forceRender();
-      context.target = target;
-      cleanEvents();
+      cancelObserver();
       if (context.div) {
         // append div
         if (target === document.body) {
@@ -198,7 +236,7 @@ var Sticky = function Sticky(props) {
         }
       }
       if (window.IntersectionObserver) {
-        var observer = new IntersectionObserver(handlePosition, {
+        var observer = new IntersectionObserver(handleTargetPosition, {
           root: target,
           rootMargin: "-".concat(top || 0, "px 0px -").concat(bottom || 0, "px 0px"),
           threshold: 1.0
@@ -221,17 +259,34 @@ var Sticky = function Sticky(props) {
     }
   };
   useEffect(function () {
-    if (!css) {
-      createObserver();
+    if (css) return;
+    var target = getTarget();
+    context.target = target;
+    if (target) {
+      createObserver(target);
       window.addEventListener('resize', updateStyle);
+      return function () {
+        cancelObserver();
+        window.removeEventListener('resize', updateStyle);
+        if (context.div) {
+          context.div.remove();
+        }
+      };
+    } else {
+      // fixed 布局
+      createBodyObserver();
+      events.forEach(function (event) {
+        window.addEventListener(event, handleFixedPosition);
+      });
+      return function () {
+        if (context.bodyObserver) {
+          context.bodyObserver.disconnect();
+        }
+        events.forEach(function (event) {
+          window.removeEventListener(event, handleFixedPosition);
+        });
+      };
     }
-    return function () {
-      cleanEvents();
-      if (context.div) {
-        context.div.remove();
-        context.div = null;
-      }
-    };
   }, [css]);
   useEffect(function () {
     if (props.parent && context.parentObserver) {
@@ -273,12 +328,14 @@ var Sticky = function Sticky(props) {
     })
   }) : null;
   var isFixed = style.position === 'fixed';
+  var hideStyle = {
+    opacity: 0,
+    pointerEvents: 'none'
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [isFixed ? StickyEl : context.target && context.div && /*#__PURE__*/createPortal(StickyEl, context.div), /*#__PURE__*/_jsx("div", {
       className: props.className,
-      style: _objectSpread(_objectSpread({}, props.style), {}, {
-        opacity: show && parentVisible ? 0 : (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.opacity
-      }),
+      style: _objectSpread(_objectSpread({}, props.style), show && parentVisible ? hideStyle : {}),
       ref: handleElementRef,
       children: children
     })]

package/esm/virtual-scroll/scroll.js

@@ -39,7 +39,7 @@ var Scroll = function Scroll(props) {
     position: 'sticky'
   }, isRtl ? 'right' : 'left', 0), "top", 0);
   var placeStyle = _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    marginTop: Math.max(0, Math.floor(scrollHeight - height))
+    marginTop: height > 0 && scrollHeight > 0 ? Math.max(0, Math.floor(scrollHeight - height)) : 0
   }, "margin".concat(isRtl ? 'Left' : 'Right'), scrollWidth), "height", 0), "width", 0), "overflow", 'hidden');
   var handleScroll = usePersistFn(function (e) {
     var target = e.currentTarget;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sheinx/base",
-  "version": "3.1.14",
+  "version": "3.1.15",
   "description": "",
   "keywords": [],
   "license": "MIT",
@@ -10,7 +10,7 @@
   "module": "./esm/index.js",
   "typings": "./cjs/index.d.ts",
   "dependencies": {
-    "@sheinx/hooks": "3.1.14",
+    "@sheinx/hooks": "3.1.15",
     "immer": "^10.0.0",
     "classnames": "^2.0.0",
     "@shined/reactive": "^0.1.3-alpha.0"