@para-ui/core 4.0.20 → 4.0.22

package/_verture/{index-cc76d8d5.js → index-066d47d4.js}

@@ -1,7 +1,7 @@
 import { _ as __rest } from './tslib.es6-55ed4bd2.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { _ as _toConsumableArray, a as _iterableToArray } from './toConsumableArray-8f4c9589.js';
-import { _ as _defineProperty, a as _toPropertyKey } from './defineProperty-1d116156.js';
+import { _ as _defineProperty, t as toPropertyKey } from './defineProperty-6f62bb2a.js';
 import { _ as _slicedToArray, a as _arrayWithHoles, b as _nonIterableRest } from './slicedToArray-a8206399.js';
 import { _ as _typeof$1 } from './typeof-adeedc13.js';
 import * as React$4 from 'react';
@@ -21,7 +21,7 @@ import { Forbid } from '@para-ui/icons';
 import { $ as $prefixCls } from './constant-5317fc89.js';
 import LoadingOutlined from '@para-ui/icons/LoadingF';
 import AutoTips from '../AutoTips/index.js';
-import { u as useFormatMessage } from './useFormatMessage-eb13cf56.js';
+import { u as useFormatMessage } from './useFormatMessage-1fc7c957.js';
 import { UUID } from '@paraview/lib';
 import { s as styleInject } from './style-inject.es-300983ab.js';
 
@@ -65,12 +65,11 @@ function _objectSpread2(e) {
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+  for (var key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
   }
   return target;
 }
@@ -231,8 +230,19 @@ var preWarningFns = [];
 var preMessage = function preMessage(fn) {
   preWarningFns.push(fn);
 };
+
+/**
+ * Warning if condition not match.
+ * @param valid Condition
+ * @param message Warning message
+ * @example
+ * ```js
+ * warning(false, 'some error'); // print some error
+ * warning(true, 'some error'); // print nothing
+ * warning(1 === 2, 'some error'); // print some error
+ * ```
+ */
 function warning(valid, message) {
-  // Support uglify
   if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
     var finalMessage = preWarningFns.reduce(function (msg, preMessageFn) {
       return preMessageFn(msg !== null && msg !== void 0 ? msg : '', 'warning');
@@ -242,8 +252,9 @@ function warning(valid, message) {
     }
   }
 }
+
+/** @see Similar to {@link warning} */
 function note(valid, message) {
-  // Support uglify
   if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
     var finalMessage = preWarningFns.reduce(function (msg, preMessageFn) {
       return preMessageFn(msg !== null && msg !== void 0 ? msg : '', 'note');
@@ -262,16 +273,19 @@ function call(method, valid, message) {
     warned[message] = true;
   }
 }
+
+/** @see Same as {@link warning}, but only warn once for the same message */
 function warningOnce(valid, message) {
   call(warning, valid, message);
 }
+
+/** @see Same as {@link warning}, but only warn once for the same message */
 function noteOnce(valid, message) {
   call(note, valid, message);
 }
 warningOnce.preMessage = preMessage;
 warningOnce.resetWarned = resetWarned;
 warningOnce.noteOnce = noteOnce;
-/* eslint-enable */
 
 var classnames = {exports: {}};
 
@@ -288,39 +302,57 @@ var classnames = {exports: {}};
 
 		var hasOwn = {}.hasOwnProperty;
 
-		function classNames() {
-			var classes = [];
+		function classNames () {
+			var classes = '';
 
 			for (var i = 0; i < arguments.length; i++) {
 				var arg = arguments[i];
-				if (!arg) continue;
-
-				var argType = typeof arg;
-
-				if (argType === 'string' || argType === 'number') {
-					classes.push(arg);
-				} else if (Array.isArray(arg)) {
-					if (arg.length) {
-						var inner = classNames.apply(null, arg);
-						if (inner) {
-							classes.push(inner);
-						}
-					}
-				} else if (argType === 'object') {
-					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-						classes.push(arg.toString());
-						continue;
-					}
-
-					for (var key in arg) {
-						if (hasOwn.call(arg, key) && arg[key]) {
-							classes.push(key);
-						}
-					}
+				if (arg) {
+					classes = appendClass(classes, parseValue(arg));
+				}
+			}
+
+			return classes;
+		}
+
+		function parseValue (arg) {
+			if (typeof arg === 'string' || typeof arg === 'number') {
+				return arg;
+			}
+
+			if (typeof arg !== 'object') {
+				return '';
+			}
+
+			if (Array.isArray(arg)) {
+				return classNames.apply(null, arg);
+			}
+
+			if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+				return arg.toString();
+			}
+
+			var classes = '';
+
+			for (var key in arg) {
+				if (hasOwn.call(arg, key) && arg[key]) {
+					classes = appendClass(classes, key);
 				}
 			}
 
-			return classes.join(' ');
+			return classes;
+		}
+
+		function appendClass (value, newClass) {
+			if (!newClass) {
+				return value;
+			}
+		
+			if (value) {
+				return value + ' ' + newClass;
+			}
+		
+			return value + newClass;
 		}
 
 		if (module.exports) {
@@ -1154,24 +1186,22 @@ function useMemo(getValue, condition, shouldUpdate) {
   return cacheRef.current.value;
 }
 
-function fillRef(ref, node) {
+var fillRef = function fillRef(ref, node) {
   if (typeof ref === 'function') {
     ref(node);
   } else if (_typeof$1(ref) === 'object' && ref && 'current' in ref) {
     ref.current = node;
   }
-}
+};
 
 /**
  * Merge refs into one ref function to support ref passing.
  */
-function composeRef() {
+var composeRef = function composeRef() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
   }
-  var refList = refs.filter(function (ref) {
-    return ref;
-  });
+  var refList = refs.filter(Boolean);
   if (refList.length <= 1) {
     return refList[0];
   }
@@ -1180,8 +1210,8 @@ function composeRef() {
       fillRef(ref, node);
     });
   };
-}
-function useComposeRef() {
+};
+var useComposeRef = function useComposeRef() {
   for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     refs[_key2] = arguments[_key2];
   }
@@ -1192,23 +1222,22 @@ function useComposeRef() {
       return ref !== next[i];
     });
   });
-}
-function supportRef(nodeOrComponent) {
+};
+var supportRef = function supportRef(nodeOrComponent) {
   var _type$prototype, _nodeOrComponent$prot;
   var type = reactIs.exports.isMemo(nodeOrComponent) ? nodeOrComponent.type.type : nodeOrComponent.type;
 
   // Function component node
-  if (typeof type === 'function' && !((_type$prototype = type.prototype) !== null && _type$prototype !== void 0 && _type$prototype.render)) {
+  if (typeof type === 'function' && !((_type$prototype = type.prototype) !== null && _type$prototype !== void 0 && _type$prototype.render) && type.$$typeof !== reactIs.exports.ForwardRef) {
     return false;
   }
 
   // Class component
-  if (typeof nodeOrComponent === 'function' && !((_nodeOrComponent$prot = nodeOrComponent.prototype) !== null && _nodeOrComponent$prot !== void 0 && _nodeOrComponent$prot.render)) {
+  if (typeof nodeOrComponent === 'function' && !((_nodeOrComponent$prot = nodeOrComponent.prototype) !== null && _nodeOrComponent$prot !== void 0 && _nodeOrComponent$prot.render) && nodeOrComponent.$$typeof !== reactIs.exports.ForwardRef) {
     return false;
   }
   return true;
-}
-/* eslint-enable */
+};
 
 var TransBtn = function TransBtn(_ref) {
   var className = _ref.className,
@@ -2466,7 +2495,7 @@ function _defineProperties(target, props) {
     descriptor.enumerable = descriptor.enumerable || false;
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+    Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);
   }
 }
 function _createClass(Constructor, protoProps, staticProps) {
@@ -2511,15 +2540,12 @@ function _getPrototypeOf(o) {
 }
 
 function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
   try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {
+    return !!t;
+  })();
 }
 
 function _assertThisInitialized(self) {
@@ -3903,7 +3929,7 @@ function injectCSS(css) {
   if (prepend) {
     // If is queue `prepend`, it will prepend first style and then append rest style
     if (isPrependQueue) {
-      var existStyle = findStyles(container).filter(function (node) {
+      var existStyle = (option.styles || findStyles(container)).filter(function (node) {
         // Ignore style which not injected by rc-util with prepend
         if (!['prepend', 'prependQueue'].includes(node.getAttribute(APPEND_ORDER))) {
           return false;
@@ -3929,7 +3955,7 @@ function injectCSS(css) {
 function findExistNode(key) {
   var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var container = getContainer(option);
-  return findStyles(container).find(function (node) {
+  return (option.styles || findStyles(container)).find(function (node) {
     return node.getAttribute(getMark(option)) === key;
   });
 }
@@ -3957,8 +3983,12 @@ function syncRealContainer(container, option) {
   }
 }
 function updateCSS(css, key) {
-  var option = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var container = getContainer(option);
+  var originOption = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var container = getContainer(originOption);
+  var styles = findStyles(container);
+  var option = _objectSpread2(_objectSpread2({}, originOption), {}, {
+    styles: styles
+  });
 
   // Sync real parent
   syncRealContainer(container, option);
@@ -3980,43 +4010,60 @@ function updateCSS(css, key) {
 }
 
 /* eslint-disable no-param-reassign */
+function measureScrollbarSize(ele) {
+  var randomId = "rc-scrollbar-measure-".concat(Math.random().toString(36).substring(7));
+  var measureEle = document.createElement('div');
+  measureEle.id = randomId;
+
+  // Create Style
+  var measureStyle = measureEle.style;
+  measureStyle.position = 'absolute';
+  measureStyle.left = '0';
+  measureStyle.top = '0';
+  measureStyle.width = '100px';
+  measureStyle.height = '100px';
+  measureStyle.overflow = 'scroll';
+
+  // Clone Style if needed
+  var fallbackWidth;
+  var fallbackHeight;
+  if (ele) {
+    var targetStyle = getComputedStyle(ele);
+    measureStyle.scrollbarColor = targetStyle.scrollbarColor;
+    measureStyle.scrollbarWidth = targetStyle.scrollbarWidth;
+
+    // Set Webkit style
+    var webkitScrollbarStyle = getComputedStyle(ele, '::-webkit-scrollbar');
+    var width = parseInt(webkitScrollbarStyle.width, 10);
+    var height = parseInt(webkitScrollbarStyle.height, 10);
+
+    // Try wrap to handle CSP case
+    try {
+      var widthStyle = width ? "width: ".concat(webkitScrollbarStyle.width, ";") : '';
+      var heightStyle = height ? "height: ".concat(webkitScrollbarStyle.height, ";") : '';
+      updateCSS("\n#".concat(randomId, "::-webkit-scrollbar {\n").concat(widthStyle, "\n").concat(heightStyle, "\n}"), randomId);
+    } catch (e) {
+      // Can't wrap, just log error
+      console.error(e);
+
+      // Get from style directly
+      fallbackWidth = width;
+      fallbackHeight = height;
+    }
+  }
+  document.body.appendChild(measureEle);
+
+  // Measure. Get fallback style if provided
+  var scrollWidth = ele && fallbackWidth && !isNaN(fallbackWidth) ? fallbackWidth : measureEle.offsetWidth - measureEle.clientWidth;
+  var scrollHeight = ele && fallbackHeight && !isNaN(fallbackHeight) ? fallbackHeight : measureEle.offsetHeight - measureEle.clientHeight;
 
-var cached;
-function getScrollBarSize(fresh) {
-  if (typeof document === 'undefined') {
-    return 0;
-  }
-  if (fresh || cached === undefined) {
-    var inner = document.createElement('div');
-    inner.style.width = '100%';
-    inner.style.height = '200px';
-    var outer = document.createElement('div');
-    var outerStyle = outer.style;
-    outerStyle.position = 'absolute';
-    outerStyle.top = '0';
-    outerStyle.left = '0';
-    outerStyle.pointerEvents = 'none';
-    outerStyle.visibility = 'hidden';
-    outerStyle.width = '200px';
-    outerStyle.height = '150px';
-    outerStyle.overflow = 'hidden';
-    outer.appendChild(inner);
-    document.body.appendChild(outer);
-    var widthContained = inner.offsetWidth;
-    outer.style.overflow = 'scroll';
-    var widthScroll = inner.offsetWidth;
-    if (widthContained === widthScroll) {
-      widthScroll = outer.clientWidth;
-    }
-    document.body.removeChild(outer);
-    cached = widthContained - widthScroll;
-  }
-  return cached;
-}
-function ensureSize(str) {
-  var match = str.match(/^(.*)px$/);
-  var value = Number(match === null || match === void 0 ? void 0 : match[1]);
-  return Number.isNaN(value) ? getScrollBarSize() : value;
+  // Clean up
+  document.body.removeChild(measureEle);
+  removeCSS(randomId);
+  return {
+    width: scrollWidth,
+    height: scrollHeight
+  };
 }
 function getTargetScrollBarSize(target) {
   if (typeof document === 'undefined' || !target || !(target instanceof Element)) {
@@ -4025,13 +4072,7 @@ function getTargetScrollBarSize(target) {
       height: 0
     };
   }
-  var _getComputedStyle = getComputedStyle(target, '::-webkit-scrollbar'),
-    width = _getComputedStyle.width,
-    height = _getComputedStyle.height;
-  return {
-    width: ensureSize(width),
-    height: ensureSize(height)
-  };
+  return measureScrollbarSize(target);
 }
 
 /**
@@ -5355,7 +5396,9 @@ var _excluded$6 = ["prefixCls", "children", "action", "showAction", "hideAction"
 // Removed Props List
 // Seems this can be auto
 // getDocument?: (element?: HTMLElement) => Document;
+
 // New version will not wrap popup with `rc-trigger-popup-content` when multiple children
+
 function generateTrigger() {
   var PortalComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Portal;
   var Trigger = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
@@ -5703,9 +5746,9 @@ function generateTrigger() {
       wrapperAction('onPointerEnter', true, mouseEnterDelay, function (event) {
         setMousePosByEvent(event);
       });
-      onPopupMouseEnter = function onPopupMouseEnter() {
+      onPopupMouseEnter = function onPopupMouseEnter(event) {
         // Only trigger re-open when popup is visible
-        if (mergedOpen || inMotion) {
+        if ((mergedOpen || inMotion) && popupEle !== null && popupEle !== void 0 && popupEle.contains(event.target)) {
           triggerOpen(true, mouseEnterDelay);
         }
       };
@@ -6930,16 +6973,15 @@ var Filler = /*#__PURE__*/React$4.forwardRef(function (_ref, ref) {
     flexDirection: 'column'
   };
   if (offsetY !== undefined) {
-    var _objectSpread2$1;
     // Not set `width` since this will break `sticky: right`
     outerStyle = {
       height: height,
       position: 'relative',
       overflow: 'hidden'
     };
-    innerStyle = _objectSpread2(_objectSpread2({}, innerStyle), {}, (_objectSpread2$1 = {
+    innerStyle = _objectSpread2(_objectSpread2({}, innerStyle), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
       transform: "translateY(".concat(offsetY, "px)")
-    }, _defineProperty(_objectSpread2$1, rtl ? 'marginRight' : 'marginLeft', -offsetX), _defineProperty(_objectSpread2$1, "position", 'absolute'), _defineProperty(_objectSpread2$1, "left", 0), _defineProperty(_objectSpread2$1, "right", 0), _defineProperty(_objectSpread2$1, "top", 0), _objectSpread2$1));
+    }, rtl ? 'marginRight' : 'marginLeft', -offsetX), "position", 'absolute'), "left", 0), "right", 0), "top", 0));
   }
   return /*#__PURE__*/React$4.createElement("div", {
     style: outerStyle
@@ -6958,265 +7000,292 @@ var Filler = /*#__PURE__*/React$4.forwardRef(function (_ref, ref) {
 });
 Filler.displayName = 'Filler';
 
-function getPageXY(e, horizontal) {
-  var obj = 'touches' in e ? e.touches[0] : e;
-  return obj[horizontal ? 'pageX' : 'pageY'];
+function Item(_ref) {
+  var children = _ref.children,
+    setRef = _ref.setRef;
+  var refFunc = React$4.useCallback(function (node) {
+    setRef(node);
+  }, []);
+  return /*#__PURE__*/React$4.cloneElement(children, {
+    ref: refFunc
+  });
 }
-var ScrollBar = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
-  var _classNames;
-  var prefixCls = props.prefixCls,
-    rtl = props.rtl,
-    scrollOffset = props.scrollOffset,
-    scrollRange = props.scrollRange,
-    onStartMove = props.onStartMove,
-    onStopMove = props.onStopMove,
-    onScroll = props.onScroll,
-    horizontal = props.horizontal,
-    spinSize = props.spinSize,
-    containerSize = props.containerSize,
-    style = props.style,
-    propsThumbStyle = props.thumbStyle;
-  var _React$useState = React$4.useState(false),
+
+function useChildren(list, startIndex, endIndex, scrollWidth, setNodeRef, renderFunc, _ref) {
+  var getKey = _ref.getKey;
+  return list.slice(startIndex, endIndex + 1).map(function (item, index) {
+    var eleIndex = startIndex + index;
+    var node = renderFunc(item, eleIndex, {
+      style: {
+        width: scrollWidth
+      }
+    });
+    var key = getKey(item);
+    return /*#__PURE__*/React$4.createElement(Item, {
+      key: key,
+      setRef: function setRef(ele) {
+        return setNodeRef(item, ele);
+      }
+    }, node);
+  });
+}
+
+/**
+ * Get index with specific start index one by one. e.g.
+ * min: 3, max: 9, start: 6
+ *
+ * Return index is:
+ * [0]: 6
+ * [1]: 7
+ * [2]: 5
+ * [3]: 8
+ * [4]: 4
+ * [5]: 9
+ * [6]: 3
+ */
+
+/**
+ * We assume that 2 list has only 1 item diff and others keeping the order.
+ * So we can use dichotomy algorithm to find changed one.
+ */
+function findListDiffIndex(originList, targetList, getKey) {
+  var originLen = originList.length;
+  var targetLen = targetList.length;
+  var shortList;
+  var longList;
+  if (originLen === 0 && targetLen === 0) {
+    return null;
+  }
+  if (originLen < targetLen) {
+    shortList = originList;
+    longList = targetList;
+  } else {
+    shortList = targetList;
+    longList = originList;
+  }
+  var notExistKey = {
+    __EMPTY_ITEM__: true
+  };
+  function getItemKey(item) {
+    if (item !== undefined) {
+      return getKey(item);
+    }
+    return notExistKey;
+  }
+
+  // Loop to find diff one
+  var diffIndex = null;
+  var multiple = Math.abs(originLen - targetLen) !== 1;
+  for (var i = 0; i < longList.length; i += 1) {
+    var shortKey = getItemKey(shortList[i]);
+    var longKey = getItemKey(longList[i]);
+    if (shortKey !== longKey) {
+      diffIndex = i;
+      multiple = multiple || shortKey !== getItemKey(longList[i + 1]);
+      break;
+    }
+  }
+  return diffIndex === null ? null : {
+    index: diffIndex,
+    multiple: multiple
+  };
+}
+
+function useDiffItem(data, getKey, onDiff) {
+  var _React$useState = React$4.useState(data),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    dragging = _React$useState2[0],
-    setDragging = _React$useState2[1];
+    prevData = _React$useState2[0],
+    setPrevData = _React$useState2[1];
   var _React$useState3 = React$4.useState(null),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    pageXY = _React$useState4[0],
-    setPageXY = _React$useState4[1];
-  var _React$useState5 = React$4.useState(null),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    startTop = _React$useState6[0],
-    setStartTop = _React$useState6[1];
-  var isLTR = !rtl;
-  // ========================= Refs =========================
-  var scrollbarRef = React$4.useRef();
-  var thumbRef = React$4.useRef();
-  // ======================= Visible ========================
-  var _React$useState7 = React$4.useState(false),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    visible = _React$useState8[0],
-    setVisible = _React$useState8[1];
-  var visibleTimeoutRef = React$4.useRef();
-  var delayHidden = function delayHidden() {
-    clearTimeout(visibleTimeoutRef.current);
-    setVisible(true);
-    visibleTimeoutRef.current = setTimeout(function () {
-      setVisible(false);
-    }, 3000);
-  };
-  // ======================== Range =========================
-  var enableScrollRange = scrollRange - containerSize || 0;
-  var enableOffsetRange = containerSize - spinSize || 0;
-  // `scrollWidth` < `clientWidth` means no need to show scrollbar
-  var canScroll = enableScrollRange > 0;
-  // ========================= Top ==========================
-  var top = React$4.useMemo(function () {
-    if (scrollOffset === 0 || enableScrollRange === 0) {
-      return 0;
+    diffItem = _React$useState4[0],
+    setDiffItem = _React$useState4[1];
+  React$4.useEffect(function () {
+    var diff = findListDiffIndex(prevData || [], data || [], getKey);
+    if ((diff === null || diff === void 0 ? void 0 : diff.index) !== undefined) {
+      onDiff === null || onDiff === void 0 || onDiff(diff.index);
+      setDiffItem(data[diff.index]);
     }
-    var ptg = scrollOffset / enableScrollRange;
-    return ptg * enableOffsetRange;
-  }, [scrollOffset, enableScrollRange, enableOffsetRange]);
-  // ====================== Container =======================
-  var onContainerMouseDown = function onContainerMouseDown(e) {
-    e.stopPropagation();
-    e.preventDefault();
-  };
-  // ======================== Thumb =========================
-  var stateRef = React$4.useRef({
-    top: top,
-    dragging: dragging,
-    pageY: pageXY,
-    startTop: startTop
+    setPrevData(data);
+  }, [data]);
+  return [diffItem];
+}
+
+var isFF = (typeof navigator === "undefined" ? "undefined" : _typeof$1(navigator)) === 'object' && /Firefox/i.test(navigator.userAgent);
+
+var useOriginScroll = (function (isScrollAtTop, isScrollAtBottom) {
+  // Do lock for a wheel when scrolling
+  var lockRef = useRef(false);
+  var lockTimeoutRef = useRef(null);
+  function lockScroll() {
+    clearTimeout(lockTimeoutRef.current);
+    lockRef.current = true;
+    lockTimeoutRef.current = setTimeout(function () {
+      lockRef.current = false;
+    }, 50);
+  }
+
+  // Pass to ref since global add is in closure
+  var scrollPingRef = useRef({
+    top: isScrollAtTop,
+    bottom: isScrollAtBottom
   });
-  stateRef.current = {
-    top: top,
-    dragging: dragging,
-    pageY: pageXY,
-    startTop: startTop
-  };
-  var onThumbMouseDown = function onThumbMouseDown(e) {
-    setDragging(true);
-    setPageXY(getPageXY(e, horizontal));
-    setStartTop(stateRef.current.top);
-    onStartMove();
-    e.stopPropagation();
-    e.preventDefault();
-  };
-  // ======================== Effect ========================
-  // React make event as passive, but we need to preventDefault
-  // Add event on dom directly instead.
-  // ref: https://github.com/facebook/react/issues/9809
-  React$4.useEffect(function () {
-    var onScrollbarTouchStart = function onScrollbarTouchStart(e) {
-      e.preventDefault();
-    };
-    var scrollbarEle = scrollbarRef.current;
-    var thumbEle = thumbRef.current;
-    scrollbarEle.addEventListener('touchstart', onScrollbarTouchStart);
-    thumbEle.addEventListener('touchstart', onThumbMouseDown);
-    return function () {
-      scrollbarEle.removeEventListener('touchstart', onScrollbarTouchStart);
-      thumbEle.removeEventListener('touchstart', onThumbMouseDown);
-    };
-  }, []);
-  // Pass to effect
-  var enableScrollRangeRef = React$4.useRef();
-  enableScrollRangeRef.current = enableScrollRange;
-  var enableOffsetRangeRef = React$4.useRef();
-  enableOffsetRangeRef.current = enableOffsetRange;
-  React$4.useEffect(function () {
-    if (dragging) {
-      var moveRafId;
-      var onMouseMove = function onMouseMove(e) {
-        var _stateRef$current = stateRef.current,
-          stateDragging = _stateRef$current.dragging,
-          statePageY = _stateRef$current.pageY,
-          stateStartTop = _stateRef$current.startTop;
-        wrapperRaf.cancel(moveRafId);
-        if (stateDragging) {
-          var offset = getPageXY(e, horizontal) - statePageY;
-          var newTop = stateStartTop;
-          if (!isLTR && horizontal) {
-            newTop -= offset;
-          } else {
-            newTop += offset;
-          }
-          var tmpEnableScrollRange = enableScrollRangeRef.current;
-          var tmpEnableOffsetRange = enableOffsetRangeRef.current;
-          var ptg = tmpEnableOffsetRange ? newTop / tmpEnableOffsetRange : 0;
-          var newScrollTop = Math.ceil(ptg * tmpEnableScrollRange);
-          newScrollTop = Math.max(newScrollTop, 0);
-          newScrollTop = Math.min(newScrollTop, tmpEnableScrollRange);
-          moveRafId = wrapperRaf(function () {
-            onScroll(newScrollTop, horizontal);
-          });
-        }
-      };
-      var onMouseUp = function onMouseUp() {
-        setDragging(false);
-        onStopMove();
-      };
-      window.addEventListener('mousemove', onMouseMove);
-      window.addEventListener('touchmove', onMouseMove);
-      window.addEventListener('mouseup', onMouseUp);
-      window.addEventListener('touchend', onMouseUp);
-      return function () {
-        window.removeEventListener('mousemove', onMouseMove);
-        window.removeEventListener('touchmove', onMouseMove);
-        window.removeEventListener('mouseup', onMouseUp);
-        window.removeEventListener('touchend', onMouseUp);
-        wrapperRaf.cancel(moveRafId);
-      };
+  scrollPingRef.current.top = isScrollAtTop;
+  scrollPingRef.current.bottom = isScrollAtBottom;
+  return function (deltaY) {
+    var smoothOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var originScroll =
+    // Pass origin wheel when on the top
+    deltaY < 0 && scrollPingRef.current.top ||
+    // Pass origin wheel when on the bottom
+    deltaY > 0 && scrollPingRef.current.bottom;
+    if (smoothOffset && originScroll) {
+      // No need lock anymore when it's smooth offset from touchMove interval
+      clearTimeout(lockTimeoutRef.current);
+      lockRef.current = false;
+    } else if (!originScroll || lockRef.current) {
+      lockScroll();
     }
-  }, [dragging]);
-  React$4.useEffect(function () {
-    delayHidden();
-  }, [scrollOffset]);
-  // ====================== Imperative ======================
-  React$4.useImperativeHandle(ref, function () {
-    return {
-      delayHidden: delayHidden
-    };
-  });
-  // ======================== Render ========================
-  var scrollbarPrefixCls = "".concat(prefixCls, "-scrollbar");
-  var containerStyle = {
-    position: 'absolute',
-    visibility: visible && canScroll ? null : 'hidden'
-  };
-  var thumbStyle = {
-    position: 'absolute',
-    background: 'rgba(0, 0, 0, 0.5)',
-    borderRadius: 99,
-    cursor: 'pointer',
-    userSelect: 'none'
+    return !lockRef.current && originScroll;
   };
-  if (horizontal) {
-    // Container
-    containerStyle.height = 8;
-    containerStyle.left = 0;
-    containerStyle.right = 0;
-    containerStyle.bottom = 0;
-    // Thumb
-    thumbStyle.height = '100%';
-    thumbStyle.width = spinSize;
-    if (isLTR) {
-      thumbStyle.left = top;
-    } else {
-      thumbStyle.right = top;
+});
+
+function useFrameWheel(inVirtual, isScrollAtTop, isScrollAtBottom, horizontalScroll,
+/***
+ * Return `true` when you need to prevent default event
+ */
+onWheelDelta) {
+  var offsetRef = useRef(0);
+  var nextFrameRef = useRef(null);
+
+  // Firefox patch
+  var wheelValueRef = useRef(null);
+  var isMouseScrollRef = useRef(false);
+
+  // Scroll status sync
+  var originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
+  function onWheelY(event, deltaY) {
+    wrapperRaf.cancel(nextFrameRef.current);
+    offsetRef.current += deltaY;
+    wheelValueRef.current = deltaY;
+
+    // Do nothing when scroll at the edge, Skip check when is in scroll
+    if (originScroll(deltaY)) return;
+
+    // Proxy of scroll events
+    if (!isFF) {
+      event.preventDefault();
     }
-  } else {
-    // Container
-    containerStyle.width = 8;
-    containerStyle.top = 0;
-    containerStyle.bottom = 0;
-    if (isLTR) {
-      containerStyle.right = 0;
+    nextFrameRef.current = wrapperRaf(function () {
+      // Patch a multiple for Firefox to fix wheel number too small
+      // ref: https://github.com/ant-design/ant-design/issues/26372#issuecomment-679460266
+      var patchMultiple = isMouseScrollRef.current ? 10 : 1;
+      onWheelDelta(offsetRef.current * patchMultiple);
+      offsetRef.current = 0;
+    });
+  }
+  function onWheelX(event, deltaX) {
+    onWheelDelta(deltaX, true);
+    if (!isFF) {
+      event.preventDefault();
+    }
+  }
+
+  // Check for which direction does wheel do. `sx` means `shift + wheel`
+  var wheelDirectionRef = useRef(null);
+  var wheelDirectionCleanRef = useRef(null);
+  function onWheel(event) {
+    if (!inVirtual) return;
+
+    // Wait for 2 frame to clean direction
+    wrapperRaf.cancel(wheelDirectionCleanRef.current);
+    wheelDirectionCleanRef.current = wrapperRaf(function () {
+      wheelDirectionRef.current = null;
+    }, 2);
+    var deltaX = event.deltaX,
+      deltaY = event.deltaY,
+      shiftKey = event.shiftKey;
+    var mergedDeltaX = deltaX;
+    var mergedDeltaY = deltaY;
+    if (wheelDirectionRef.current === 'sx' || !wheelDirectionRef.current && (shiftKey || false) && deltaY && !deltaX) {
+      mergedDeltaX = deltaY;
+      mergedDeltaY = 0;
+      wheelDirectionRef.current = 'sx';
+    }
+    var absX = Math.abs(mergedDeltaX);
+    var absY = Math.abs(mergedDeltaY);
+    if (wheelDirectionRef.current === null) {
+      wheelDirectionRef.current = horizontalScroll && absX > absY ? 'x' : 'y';
+    }
+    if (wheelDirectionRef.current === 'y') {
+      onWheelY(event, mergedDeltaY);
     } else {
-      containerStyle.left = 0;
+      onWheelX(event, mergedDeltaX);
     }
-    // Thumb
-    thumbStyle.width = '100%';
-    thumbStyle.height = spinSize;
-    thumbStyle.top = top;
   }
-  return /*#__PURE__*/React$4.createElement("div", {
-    ref: scrollbarRef,
-    className: classNames(scrollbarPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(scrollbarPrefixCls, "-horizontal"), horizontal), _defineProperty(_classNames, "".concat(scrollbarPrefixCls, "-vertical"), !horizontal), _defineProperty(_classNames, "".concat(scrollbarPrefixCls, "-visible"), visible), _classNames)),
-    style: _objectSpread2(_objectSpread2({}, containerStyle), style),
-    onMouseDown: onContainerMouseDown,
-    onMouseMove: delayHidden
-  }, /*#__PURE__*/React$4.createElement("div", {
-    ref: thumbRef,
-    className: classNames("".concat(scrollbarPrefixCls, "-thumb"), _defineProperty({}, "".concat(scrollbarPrefixCls, "-thumb-moving"), dragging)),
-    style: _objectSpread2(_objectSpread2({}, thumbStyle), propsThumbStyle),
-    onMouseDown: onThumbMouseDown
-  }));
-});
-if (process.env.NODE_ENV !== 'production') {
-  ScrollBar.displayName = 'ScrollBar';
-}
 
-function Item(_ref) {
-  var children = _ref.children,
-    setRef = _ref.setRef;
-  var refFunc = React$4.useCallback(function (node) {
-    setRef(node);
-  }, []);
-  return /*#__PURE__*/React$4.cloneElement(children, {
-    ref: refFunc
-  });
+  // A patch for firefox
+  function onFireFoxScroll(event) {
+    if (!inVirtual) return;
+    isMouseScrollRef.current = event.detail === wheelValueRef.current;
+  }
+  return [onWheel, onFireFoxScroll];
 }
 
-function useChildren(list, startIndex, endIndex, scrollWidth, setNodeRef, renderFunc, _ref) {
-  var getKey = _ref.getKey;
-  return list.slice(startIndex, endIndex + 1).map(function (item, index) {
-    var eleIndex = startIndex + index;
-    var node = renderFunc(item, eleIndex, {
-      style: {
-        width: scrollWidth
-      }
-    });
-    var key = getKey(item);
-    return /*#__PURE__*/React$4.createElement(Item, {
-      key: key,
-      setRef: function setRef(ele) {
-        return setNodeRef(item, ele);
+/**
+ * Size info need loop query for the `heights` which will has the perf issue.
+ * Let cache result for each render phase.
+ */
+function useGetSize(mergedData, getKey, heights, itemHeight) {
+  var _React$useMemo = React$4.useMemo(function () {
+      return [new Map(), []];
+    }, [mergedData, heights.id, itemHeight]),
+    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+    key2Index = _React$useMemo2[0],
+    bottomList = _React$useMemo2[1];
+  var getSize = function getSize(startKey) {
+    var endKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : startKey;
+    // Get from cache first
+    var startIndex = key2Index.get(startKey);
+    var endIndex = key2Index.get(endKey);
+
+    // Loop to fill the cache
+    if (startIndex === undefined || endIndex === undefined) {
+      var dataLen = mergedData.length;
+      for (var i = bottomList.length; i < dataLen; i += 1) {
+        var _heights$get;
+        var item = mergedData[i];
+        var key = getKey(item);
+        key2Index.set(key, i);
+        var cacheHeight = (_heights$get = heights.get(key)) !== null && _heights$get !== void 0 ? _heights$get : itemHeight;
+        bottomList[i] = (bottomList[i - 1] || 0) + cacheHeight;
+        if (key === startKey) {
+          startIndex = i;
+        }
+        if (key === endKey) {
+          endIndex = i;
+        }
+        if (startIndex !== undefined && endIndex !== undefined) {
+          break;
+        }
       }
-    }, node);
-  });
+    }
+    return {
+      top: bottomList[startIndex - 1] || 0,
+      bottom: bottomList[endIndex]
+    };
+  };
+  return getSize;
 }
 
 // Firefox has low performance of map.
 var CacheMap = /*#__PURE__*/function () {
   function CacheMap() {
     _classCallCheck(this, CacheMap);
-    this.maps = void 0;
+    _defineProperty(this, "maps", void 0);
     // Used for cache key
     // `useMemo` no need to update if `id` not change
-    this.id = 0;
+    _defineProperty(this, "id", 0);
     this.maps = Object.create(null);
   }
   _createClass(CacheMap, [{
@@ -7258,6 +7327,7 @@ function useHeights(getKey, onItemAdd, onItemRemove) {
           }
         }
       });
+
       // Always trigger update mark to tell parent that should re-calculate heights when resized
       setUpdatedMark(function (c) {
         return c + 1;
@@ -7278,12 +7348,13 @@ function useHeights(getKey, onItemAdd, onItemRemove) {
     } else {
       instanceRef.current.delete(key);
     }
+
     // Instance changed
     if (!origin !== !instance) {
       if (instance) {
-        onItemAdd === null || onItemAdd === void 0 ? void 0 : onItemAdd(item);
+        onItemAdd === null || onItemAdd === void 0 || onItemAdd(item);
       } else {
-        onItemRemove === null || onItemRemove === void 0 ? void 0 : onItemRemove(item);
+        onItemRemove === null || onItemRemove === void 0 || onItemRemove(item);
       }
     }
   }
@@ -7293,6 +7364,69 @@ function useHeights(getKey, onItemAdd, onItemRemove) {
   return [setInstanceRef, collectHeight, heightsRef.current, updatedMark];
 }
 
+var SMOOTH_PTG = 14 / 15;
+function useMobileTouchMove(inVirtual, listRef, callback) {
+  var touchedRef = useRef(false);
+  var touchYRef = useRef(0);
+  var elementRef = useRef(null);
+
+  // Smooth scroll
+  var intervalRef = useRef(null);
+
+  /* eslint-disable prefer-const */
+  var cleanUpEvents;
+  var onTouchMove = function onTouchMove(e) {
+    if (touchedRef.current) {
+      var currentY = Math.ceil(e.touches[0].pageY);
+      var _offsetY = touchYRef.current - currentY;
+      touchYRef.current = currentY;
+      if (callback(_offsetY)) {
+        e.preventDefault();
+      }
+
+      // Smooth interval
+      clearInterval(intervalRef.current);
+      intervalRef.current = setInterval(function () {
+        _offsetY *= SMOOTH_PTG;
+        if (!callback(_offsetY, true) || Math.abs(_offsetY) <= 0.1) {
+          clearInterval(intervalRef.current);
+        }
+      }, 16);
+    }
+  };
+  var onTouchEnd = function onTouchEnd() {
+    touchedRef.current = false;
+    cleanUpEvents();
+  };
+  var onTouchStart = function onTouchStart(e) {
+    cleanUpEvents();
+    if (e.touches.length === 1 && !touchedRef.current) {
+      touchedRef.current = true;
+      touchYRef.current = Math.ceil(e.touches[0].pageY);
+      elementRef.current = e.target;
+      elementRef.current.addEventListener('touchmove', onTouchMove);
+      elementRef.current.addEventListener('touchend', onTouchEnd);
+    }
+  };
+  cleanUpEvents = function cleanUpEvents() {
+    if (elementRef.current) {
+      elementRef.current.removeEventListener('touchmove', onTouchMove);
+      elementRef.current.removeEventListener('touchend', onTouchEnd);
+    }
+  };
+  useLayoutEffect$3(function () {
+    if (inVirtual) {
+      listRef.current.addEventListener('touchstart', onTouchStart);
+    }
+    return function () {
+      var _listRef$current;
+      (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.removeEventListener('touchstart', onTouchStart);
+      cleanUpEvents();
+      clearInterval(intervalRef.current);
+    };
+  }, [inVirtual]);
+}
+
 var MAX_TIMES = 10;
 function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHeight, syncScrollTop, triggerFlash) {
   var scrollRef = React$4.useRef();
@@ -7300,6 +7434,7 @@ function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHei
     _React$useState2 = _slicedToArray(_React$useState, 2),
     syncState = _React$useState2[0],
     setSyncState = _React$useState2[1];
+
   // ========================== Sync Scroll ==========================
   useLayoutEffect$3(function () {
     if (syncState && syncState.times < MAX_TIMES) {
@@ -7319,9 +7454,11 @@ function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHei
       var needCollectHeight = false;
       var newTargetAlign = targetAlign;
       var targetTop = null;
+
       // Go to next frame if height not exist
       if (height) {
         var mergedAlign = targetAlign || originAlign;
+
         // Get top & bottom
         var stackTop = 0;
         var itemTop = 0;
@@ -7334,6 +7471,7 @@ function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHei
           itemBottom = itemTop + (cacheHeight === undefined ? itemHeight : cacheHeight);
           stackTop = itemBottom;
         }
+
         // Check if need sync height (visible range has item not record height)
         var leftHeight = mergedAlign === 'top' ? offset : height - offset;
         for (var _i = maxLen; _i >= 0; _i -= 1) {
@@ -7348,6 +7486,7 @@ function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHei
             break;
           }
         }
+
         // Scroll to
         switch (mergedAlign) {
           case 'top':
@@ -7370,11 +7509,13 @@ function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHei
         if (targetTop !== null) {
           syncScrollTop(targetTop);
         }
+
         // One more time for sync
         if (targetTop !== syncState.lastTop) {
           needCollectHeight = true;
         }
       }
+
       // Trigger next effect
       if (needCollectHeight) {
         setSyncState(_objectSpread2(_objectSpread2({}, syncState), {}, {
@@ -7387,6 +7528,7 @@ function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHei
       warningOnce(false, 'Seems `scrollTo` with `rc-virtual-list` reach the max limitation. Please fire issue for us. Thanks.');
     }
   }, [syncState, containerRef.current]);
+
   // =========================== Scroll To ===========================
   return function (arg) {
     // When not argument provided, we think dev may want to show the scrollbar
@@ -7394,342 +7536,276 @@ function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHei
       triggerFlash();
       return;
     }
-    // Normal scroll logic
-    wrapperRaf.cancel(scrollRef.current);
-    if (typeof arg === 'number') {
-      syncScrollTop(arg);
-    } else if (arg && _typeof$1(arg) === 'object') {
-      var index;
-      var align = arg.align;
-      if ('index' in arg) {
-        index = arg.index;
-      } else {
-        index = data.findIndex(function (item) {
-          return getKey(item) === arg.key;
-        });
-      }
-      var _arg$offset = arg.offset,
-        offset = _arg$offset === void 0 ? 0 : _arg$offset;
-      setSyncState({
-        times: 0,
-        index: index,
-        offset: offset,
-        originAlign: align
-      });
-    }
-  };
-}
-
-/**
- * Get index with specific start index one by one. e.g.
- * min: 3, max: 9, start: 6
- *
- * Return index is:
- * [0]: 6
- * [1]: 7
- * [2]: 5
- * [3]: 8
- * [4]: 4
- * [5]: 9
- * [6]: 3
- */
-/**
- * We assume that 2 list has only 1 item diff and others keeping the order.
- * So we can use dichotomy algorithm to find changed one.
- */
-function findListDiffIndex(originList, targetList, getKey) {
-  var originLen = originList.length;
-  var targetLen = targetList.length;
-  var shortList;
-  var longList;
-  if (originLen === 0 && targetLen === 0) {
-    return null;
-  }
-  if (originLen < targetLen) {
-    shortList = originList;
-    longList = targetList;
-  } else {
-    shortList = targetList;
-    longList = originList;
-  }
-  var notExistKey = {
-    __EMPTY_ITEM__: true
-  };
-  function getItemKey(item) {
-    if (item !== undefined) {
-      return getKey(item);
-    }
-    return notExistKey;
-  }
-  // Loop to find diff one
-  var diffIndex = null;
-  var multiple = Math.abs(originLen - targetLen) !== 1;
-  for (var i = 0; i < longList.length; i += 1) {
-    var shortKey = getItemKey(shortList[i]);
-    var longKey = getItemKey(longList[i]);
-    if (shortKey !== longKey) {
-      diffIndex = i;
-      multiple = multiple || shortKey !== getItemKey(longList[i + 1]);
-      break;
-    }
-  }
-  return diffIndex === null ? null : {
-    index: diffIndex,
-    multiple: multiple
+
+    // Normal scroll logic
+    wrapperRaf.cancel(scrollRef.current);
+    if (typeof arg === 'number') {
+      syncScrollTop(arg);
+    } else if (arg && _typeof$1(arg) === 'object') {
+      var index;
+      var align = arg.align;
+      if ('index' in arg) {
+        index = arg.index;
+      } else {
+        index = data.findIndex(function (item) {
+          return getKey(item) === arg.key;
+        });
+      }
+      var _arg$offset = arg.offset,
+        offset = _arg$offset === void 0 ? 0 : _arg$offset;
+      setSyncState({
+        times: 0,
+        index: index,
+        offset: offset,
+        originAlign: align
+      });
+    }
   };
 }
 
-function useDiffItem(data, getKey, onDiff) {
-  var _React$useState = React$4.useState(data),
+function getPageXY(e, horizontal) {
+  var obj = 'touches' in e ? e.touches[0] : e;
+  return obj[horizontal ? 'pageX' : 'pageY'];
+}
+var ScrollBar = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+    rtl = props.rtl,
+    scrollOffset = props.scrollOffset,
+    scrollRange = props.scrollRange,
+    onStartMove = props.onStartMove,
+    onStopMove = props.onStopMove,
+    onScroll = props.onScroll,
+    horizontal = props.horizontal,
+    spinSize = props.spinSize,
+    containerSize = props.containerSize,
+    style = props.style,
+    propsThumbStyle = props.thumbStyle;
+  var _React$useState = React$4.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    prevData = _React$useState2[0],
-    setPrevData = _React$useState2[1];
+    dragging = _React$useState2[0],
+    setDragging = _React$useState2[1];
   var _React$useState3 = React$4.useState(null),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    diffItem = _React$useState4[0],
-    setDiffItem = _React$useState4[1];
-  React$4.useEffect(function () {
-    var diff = findListDiffIndex(prevData || [], data || [], getKey);
-    if ((diff === null || diff === void 0 ? void 0 : diff.index) !== undefined) {
-      onDiff === null || onDiff === void 0 ? void 0 : onDiff(diff.index);
-      setDiffItem(data[diff.index]);
+    pageXY = _React$useState4[0],
+    setPageXY = _React$useState4[1];
+  var _React$useState5 = React$4.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    startTop = _React$useState6[0],
+    setStartTop = _React$useState6[1];
+  var isLTR = !rtl;
+
+  // ========================= Refs =========================
+  var scrollbarRef = React$4.useRef();
+  var thumbRef = React$4.useRef();
+
+  // ======================= Visible ========================
+  var _React$useState7 = React$4.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    visible = _React$useState8[0],
+    setVisible = _React$useState8[1];
+  var visibleTimeoutRef = React$4.useRef();
+  var delayHidden = function delayHidden() {
+    clearTimeout(visibleTimeoutRef.current);
+    setVisible(true);
+    visibleTimeoutRef.current = setTimeout(function () {
+      setVisible(false);
+    }, 3000);
+  };
+
+  // ======================== Range =========================
+  var enableScrollRange = scrollRange - containerSize || 0;
+  var enableOffsetRange = containerSize - spinSize || 0;
+
+  // ========================= Top ==========================
+  var top = React$4.useMemo(function () {
+    if (scrollOffset === 0 || enableScrollRange === 0) {
+      return 0;
     }
-    setPrevData(data);
-  }, [data]);
-  return [diffItem];
-}
+    var ptg = scrollOffset / enableScrollRange;
+    return ptg * enableOffsetRange;
+  }, [scrollOffset, enableScrollRange, enableOffsetRange]);
 
-var isFF = (typeof navigator === "undefined" ? "undefined" : _typeof$1(navigator)) === 'object' && /Firefox/i.test(navigator.userAgent);
+  // ====================== Container =======================
+  var onContainerMouseDown = function onContainerMouseDown(e) {
+    e.stopPropagation();
+    e.preventDefault();
+  };
 
-var useOriginScroll = (function (isScrollAtTop, isScrollAtBottom) {
-  // Do lock for a wheel when scrolling
-  var lockRef = useRef(false);
-  var lockTimeoutRef = useRef(null);
-  function lockScroll() {
-    clearTimeout(lockTimeoutRef.current);
-    lockRef.current = true;
-    lockTimeoutRef.current = setTimeout(function () {
-      lockRef.current = false;
-    }, 50);
-  }
-  // Pass to ref since global add is in closure
-  var scrollPingRef = useRef({
-    top: isScrollAtTop,
-    bottom: isScrollAtBottom
+  // ======================== Thumb =========================
+  var stateRef = React$4.useRef({
+    top: top,
+    dragging: dragging,
+    pageY: pageXY,
+    startTop: startTop
   });
-  scrollPingRef.current.top = isScrollAtTop;
-  scrollPingRef.current.bottom = isScrollAtBottom;
-  return function (deltaY) {
-    var smoothOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var originScroll =
-    // Pass origin wheel when on the top
-    deltaY < 0 && scrollPingRef.current.top ||
-    // Pass origin wheel when on the bottom
-    deltaY > 0 && scrollPingRef.current.bottom;
-    if (smoothOffset && originScroll) {
-      // No need lock anymore when it's smooth offset from touchMove interval
-      clearTimeout(lockTimeoutRef.current);
-      lockRef.current = false;
-    } else if (!originScroll || lockRef.current) {
-      lockScroll();
-    }
-    return !lockRef.current && originScroll;
+  stateRef.current = {
+    top: top,
+    dragging: dragging,
+    pageY: pageXY,
+    startTop: startTop
+  };
+  var onThumbMouseDown = function onThumbMouseDown(e) {
+    setDragging(true);
+    setPageXY(getPageXY(e, horizontal));
+    setStartTop(stateRef.current.top);
+    onStartMove();
+    e.stopPropagation();
+    e.preventDefault();
   };
-});
 
-function useFrameWheel(inVirtual, isScrollAtTop, isScrollAtBottom, horizontalScroll,
-/***
- * Return `true` when you need to prevent default event
- */
-onWheelDelta) {
-  var offsetRef = useRef(0);
-  var nextFrameRef = useRef(null);
-  // Firefox patch
-  var wheelValueRef = useRef(null);
-  var isMouseScrollRef = useRef(false);
-  // Scroll status sync
-  var originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
-  function onWheelY(event, deltaY) {
-    wrapperRaf.cancel(nextFrameRef.current);
-    offsetRef.current += deltaY;
-    wheelValueRef.current = deltaY;
-    // Do nothing when scroll at the edge, Skip check when is in scroll
-    if (originScroll(deltaY)) return;
-    // Proxy of scroll events
-    if (!isFF) {
-      event.preventDefault();
-    }
-    nextFrameRef.current = wrapperRaf(function () {
-      // Patch a multiple for Firefox to fix wheel number too small
-      // ref: https://github.com/ant-design/ant-design/issues/26372#issuecomment-679460266
-      var patchMultiple = isMouseScrollRef.current ? 10 : 1;
-      onWheelDelta(offsetRef.current * patchMultiple);
-      offsetRef.current = 0;
-    });
-  }
-  function onWheelX(event, deltaX) {
-    onWheelDelta(deltaX, true);
-    if (!isFF) {
-      event.preventDefault();
-    }
-  }
-  // Check for which direction does wheel do. `sx` means `shift + wheel`
-  var wheelDirectionRef = useRef(null);
-  var wheelDirectionCleanRef = useRef(null);
-  function onWheel(event) {
-    if (!inVirtual) return;
-    // Wait for 2 frame to clean direction
-    wrapperRaf.cancel(wheelDirectionCleanRef.current);
-    wheelDirectionCleanRef.current = wrapperRaf(function () {
-      wheelDirectionRef.current = null;
-    }, 2);
-    var deltaX = event.deltaX,
-      deltaY = event.deltaY,
-      shiftKey = event.shiftKey;
-    var mergedDeltaX = deltaX;
-    var mergedDeltaY = deltaY;
-    if (wheelDirectionRef.current === 'sx' || !wheelDirectionRef.current && (shiftKey || false) && deltaY && !deltaX) {
-      mergedDeltaX = deltaY;
-      mergedDeltaY = 0;
-      wheelDirectionRef.current = 'sx';
-    }
-    var absX = Math.abs(mergedDeltaX);
-    var absY = Math.abs(mergedDeltaY);
-    if (wheelDirectionRef.current === null) {
-      wheelDirectionRef.current = horizontalScroll && absX > absY ? 'x' : 'y';
-    }
-    if (wheelDirectionRef.current === 'y') {
-      onWheelY(event, mergedDeltaY);
-    } else {
-      onWheelX(event, mergedDeltaX);
-    }
-  }
-  // A patch for firefox
-  function onFireFoxScroll(event) {
-    if (!inVirtual) return;
-    isMouseScrollRef.current = event.detail === wheelValueRef.current;
-  }
-  return [onWheel, onFireFoxScroll];
-}
+  // ======================== Effect ========================
 
-var SMOOTH_PTG = 14 / 15;
-function useMobileTouchMove(inVirtual, listRef, callback) {
-  var touchedRef = useRef(false);
-  var touchYRef = useRef(0);
-  var elementRef = useRef(null);
-  // Smooth scroll
-  var intervalRef = useRef(null);
-  /* eslint-disable prefer-const */
-  var cleanUpEvents;
-  var onTouchMove = function onTouchMove(e) {
-    if (touchedRef.current) {
-      var currentY = Math.ceil(e.touches[0].pageY);
-      var offsetY = touchYRef.current - currentY;
-      touchYRef.current = currentY;
-      if (callback(offsetY)) {
-        e.preventDefault();
-      }
-      // Smooth interval
-      clearInterval(intervalRef.current);
-      intervalRef.current = setInterval(function () {
-        offsetY *= SMOOTH_PTG;
-        if (!callback(offsetY, true) || Math.abs(offsetY) <= 0.1) {
-          clearInterval(intervalRef.current);
+  // React make event as passive, but we need to preventDefault
+  // Add event on dom directly instead.
+  // ref: https://github.com/facebook/react/issues/9809
+  React$4.useEffect(function () {
+    var onScrollbarTouchStart = function onScrollbarTouchStart(e) {
+      e.preventDefault();
+    };
+    var scrollbarEle = scrollbarRef.current;
+    var thumbEle = thumbRef.current;
+    scrollbarEle.addEventListener('touchstart', onScrollbarTouchStart);
+    thumbEle.addEventListener('touchstart', onThumbMouseDown);
+    return function () {
+      scrollbarEle.removeEventListener('touchstart', onScrollbarTouchStart);
+      thumbEle.removeEventListener('touchstart', onThumbMouseDown);
+    };
+  }, []);
+
+  // Pass to effect
+  var enableScrollRangeRef = React$4.useRef();
+  enableScrollRangeRef.current = enableScrollRange;
+  var enableOffsetRangeRef = React$4.useRef();
+  enableOffsetRangeRef.current = enableOffsetRange;
+  React$4.useEffect(function () {
+    if (dragging) {
+      var moveRafId;
+      var onMouseMove = function onMouseMove(e) {
+        var _stateRef$current = stateRef.current,
+          stateDragging = _stateRef$current.dragging,
+          statePageY = _stateRef$current.pageY,
+          stateStartTop = _stateRef$current.startTop;
+        wrapperRaf.cancel(moveRafId);
+        if (stateDragging) {
+          var offset = getPageXY(e, horizontal) - statePageY;
+          var newTop = stateStartTop;
+          if (!isLTR && horizontal) {
+            newTop -= offset;
+          } else {
+            newTop += offset;
+          }
+          var tmpEnableScrollRange = enableScrollRangeRef.current;
+          var tmpEnableOffsetRange = enableOffsetRangeRef.current;
+          var ptg = tmpEnableOffsetRange ? newTop / tmpEnableOffsetRange : 0;
+          var newScrollTop = Math.ceil(ptg * tmpEnableScrollRange);
+          newScrollTop = Math.max(newScrollTop, 0);
+          newScrollTop = Math.min(newScrollTop, tmpEnableScrollRange);
+          moveRafId = wrapperRaf(function () {
+            onScroll(newScrollTop, horizontal);
+          });
         }
-      }, 16);
+      };
+      var onMouseUp = function onMouseUp() {
+        setDragging(false);
+        onStopMove();
+      };
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('touchmove', onMouseMove);
+      window.addEventListener('mouseup', onMouseUp);
+      window.addEventListener('touchend', onMouseUp);
+      return function () {
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('touchmove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+        window.removeEventListener('touchend', onMouseUp);
+        wrapperRaf.cancel(moveRafId);
+      };
     }
+  }, [dragging]);
+  React$4.useEffect(function () {
+    delayHidden();
+  }, [scrollOffset]);
+
+  // ====================== Imperative ======================
+  React$4.useImperativeHandle(ref, function () {
+    return {
+      delayHidden: delayHidden
+    };
+  });
+
+  // ======================== Render ========================
+  var scrollbarPrefixCls = "".concat(prefixCls, "-scrollbar");
+  var containerStyle = {
+    position: 'absolute',
+    visibility: visible ? null : 'hidden'
   };
-  var onTouchEnd = function onTouchEnd() {
-    touchedRef.current = false;
-    cleanUpEvents();
-  };
-  var onTouchStart = function onTouchStart(e) {
-    cleanUpEvents();
-    if (e.touches.length === 1 && !touchedRef.current) {
-      touchedRef.current = true;
-      touchYRef.current = Math.ceil(e.touches[0].pageY);
-      elementRef.current = e.target;
-      elementRef.current.addEventListener('touchmove', onTouchMove);
-      elementRef.current.addEventListener('touchend', onTouchEnd);
-    }
+  var thumbStyle = {
+    position: 'absolute',
+    background: 'rgba(0, 0, 0, 0.5)',
+    borderRadius: 99,
+    cursor: 'pointer',
+    userSelect: 'none'
   };
-  cleanUpEvents = function cleanUpEvents() {
-    if (elementRef.current) {
-      elementRef.current.removeEventListener('touchmove', onTouchMove);
-      elementRef.current.removeEventListener('touchend', onTouchEnd);
+  if (horizontal) {
+    // Container
+    containerStyle.height = 8;
+    containerStyle.left = 0;
+    containerStyle.right = 0;
+    containerStyle.bottom = 0;
+
+    // Thumb
+    thumbStyle.height = '100%';
+    thumbStyle.width = spinSize;
+    if (isLTR) {
+      thumbStyle.left = top;
+    } else {
+      thumbStyle.right = top;
     }
-  };
-  useLayoutEffect$3(function () {
-    if (inVirtual) {
-      listRef.current.addEventListener('touchstart', onTouchStart);
+  } else {
+    // Container
+    containerStyle.width = 8;
+    containerStyle.top = 0;
+    containerStyle.bottom = 0;
+    if (isLTR) {
+      containerStyle.right = 0;
+    } else {
+      containerStyle.left = 0;
     }
-    return function () {
-      var _listRef$current;
-      (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.removeEventListener('touchstart', onTouchStart);
-      cleanUpEvents();
-      clearInterval(intervalRef.current);
-    };
-  }, [inVirtual]);
+
+    // Thumb
+    thumbStyle.width = '100%';
+    thumbStyle.height = spinSize;
+    thumbStyle.top = top;
+  }
+  return /*#__PURE__*/React$4.createElement("div", {
+    ref: scrollbarRef,
+    className: classNames(scrollbarPrefixCls, _defineProperty(_defineProperty(_defineProperty({}, "".concat(scrollbarPrefixCls, "-horizontal"), horizontal), "".concat(scrollbarPrefixCls, "-vertical"), !horizontal), "".concat(scrollbarPrefixCls, "-visible"), visible)),
+    style: _objectSpread2(_objectSpread2({}, containerStyle), style),
+    onMouseDown: onContainerMouseDown,
+    onMouseMove: delayHidden
+  }, /*#__PURE__*/React$4.createElement("div", {
+    ref: thumbRef,
+    className: classNames("".concat(scrollbarPrefixCls, "-thumb"), _defineProperty({}, "".concat(scrollbarPrefixCls, "-thumb-moving"), dragging)),
+    style: _objectSpread2(_objectSpread2({}, thumbStyle), propsThumbStyle),
+    onMouseDown: onThumbMouseDown
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  ScrollBar.displayName = 'ScrollBar';
 }
 
 var MIN_SIZE = 20;
 function getSpinSize() {
   var containerSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var scrollRange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var baseSize = containerSize / scrollRange * 100;
+  var baseSize = containerSize / scrollRange * containerSize;
   if (isNaN(baseSize)) {
     baseSize = 0;
   }
   baseSize = Math.max(baseSize, MIN_SIZE);
-  baseSize = Math.min(baseSize, containerSize / 2);
   return Math.floor(baseSize);
 }
 
-/**
- * Size info need loop query for the `heights` which will has the perf issue.
- * Let cache result for each render phase.
- */
-function useGetSize(mergedData, getKey, heights, itemHeight) {
-  var _React$useMemo = React$4.useMemo(function () {
-      return [new Map(), []];
-    }, [mergedData, heights.id, itemHeight]),
-    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
-    key2Index = _React$useMemo2[0],
-    bottomList = _React$useMemo2[1];
-  var getSize = function getSize(startKey) {
-    var endKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : startKey;
-    // Get from cache first
-    var startIndex = key2Index.get(startKey);
-    var endIndex = key2Index.get(endKey);
-    // Loop to fill the cache
-    if (startIndex === undefined || endIndex === undefined) {
-      var dataLen = mergedData.length;
-      for (var i = bottomList.length; i < dataLen; i += 1) {
-        var _heights$get;
-        var item = mergedData[i];
-        var key = getKey(item);
-        key2Index.set(key, i);
-        var cacheHeight = (_heights$get = heights.get(key)) !== null && _heights$get !== void 0 ? _heights$get : itemHeight;
-        bottomList[i] = (bottomList[i - 1] || 0) + cacheHeight;
-        if (key === startKey) {
-          startIndex = i;
-        }
-        if (key === endKey) {
-          endIndex = i;
-        }
-        if (startIndex !== undefined && endIndex !== undefined) {
-          break;
-        }
-      }
-    }
-    return {
-      top: bottomList[startIndex - 1] || 0,
-      bottom: bottomList[endIndex]
-    };
-  };
-  return getSize;
-}
-
 var _excluded$2 = ["prefixCls", "className", "height", "itemHeight", "fullHeight", "style", "data", "children", "itemKey", "virtual", "direction", "scrollWidth", "component", "onScroll", "onVirtualScroll", "onVisibleChange", "innerProps", "extraRender", "styles"];
 var EMPTY_DATA = [];
 var ScrollStyle = {
@@ -7760,15 +7836,39 @@ function RawList(props, ref) {
     extraRender = props.extraRender,
     styles = props.styles,
     restProps = _objectWithoutProperties(props, _excluded$2);
+
+  // =============================== Item Key ===============================
+  var getKey = React$4.useCallback(function (item) {
+    if (typeof itemKey === 'function') {
+      return itemKey(item);
+    }
+    return item === null || item === void 0 ? void 0 : item[itemKey];
+  }, [itemKey]);
+
+  // ================================ Height ================================
+  var _useHeights = useHeights(getKey, null, null),
+    _useHeights2 = _slicedToArray(_useHeights, 4),
+    setInstanceRef = _useHeights2[0],
+    collectHeight = _useHeights2[1],
+    heights = _useHeights2[2],
+    heightUpdatedMark = _useHeights2[3];
+
   // ================================= MISC =================================
   var useVirtual = !!(virtual !== false && height && itemHeight);
-  var inVirtual = useVirtual && data && (itemHeight * data.length > height || !!scrollWidth);
+  var containerHeight = React$4.useMemo(function () {
+    return Object.values(heights.maps).reduce(function (total, curr) {
+      return total + curr;
+    }, 0);
+  }, [heights.id, heights.maps]);
+  var inVirtual = useVirtual && data && (Math.max(itemHeight * data.length, containerHeight) > height || !!scrollWidth);
   var isRTL = direction === 'rtl';
   var mergedClassName = classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), className);
   var mergedData = data || EMPTY_DATA;
   var componentRef = useRef();
   var fillerInnerRef = useRef();
+
   // =============================== Item Key ===============================
+
   var _useState = useState$1(0),
     _useState2 = _slicedToArray(_useState, 2),
     offsetTop = _useState2[0],
@@ -7787,16 +7887,10 @@ function RawList(props, ref) {
   var onScrollbarStopMove = function onScrollbarStopMove() {
     setScrollMoving(false);
   };
-  // =============================== Item Key ===============================
-  var getKey = React$4.useCallback(function (item) {
-    if (typeof itemKey === 'function') {
-      return itemKey(item);
-    }
-    return item === null || item === void 0 ? void 0 : item[itemKey];
-  }, [itemKey]);
   var sharedConfig = {
     getKey: getKey
   };
+
   // ================================ Scroll ================================
   function syncScrollTop(newTop) {
     setOffsetTop(function (origin) {
@@ -7811,6 +7905,7 @@ function RawList(props, ref) {
       return alignedTop;
     });
   }
+
   // ================================ Legacy ================================
   // Put ref here since the range is generate by follow
   var rangeRef = useRef({
@@ -7822,13 +7917,7 @@ function RawList(props, ref) {
     _useDiffItem2 = _slicedToArray(_useDiffItem, 1),
     diffItem = _useDiffItem2[0];
   diffItemRef.current = diffItem;
-  // ================================ Height ================================
-  var _useHeights = useHeights(getKey, null, null),
-    _useHeights2 = _slicedToArray(_useHeights, 4),
-    setInstanceRef = _useHeights2[0],
-    collectHeight = _useHeights2[1],
-    heights = _useHeights2[2],
-    heightUpdatedMark = _useHeights2[3];
+
   // ========================== Visible Calculation =========================
   var _React$useMemo = React$4.useMemo(function () {
       if (!useVirtual) {
@@ -7839,6 +7928,7 @@ function RawList(props, ref) {
           offset: undefined
         };
       }
+
       // Always use virtual scroll bar in avoid shaking
       if (!inVirtual) {
         var _fillerInnerRef$curre;
@@ -7855,21 +7945,24 @@ function RawList(props, ref) {
       var endIndex;
       var dataLen = mergedData.length;
       for (var i = 0; i < dataLen; i += 1) {
-        var item = mergedData[i];
-        var key = getKey(item);
+        var _item = mergedData[i];
+        var key = getKey(_item);
         var cacheHeight = heights.get(key);
         var currentItemBottom = itemTop + (cacheHeight === undefined ? itemHeight : cacheHeight);
+
         // Check item top in the range
         if (currentItemBottom >= offsetTop && startIndex === undefined) {
           startIndex = i;
           startOffset = itemTop;
         }
+
         // Check item bottom in the range. We will render additional one item for motion usage
         if (currentItemBottom > offsetTop + height && endIndex === undefined) {
           endIndex = i;
         }
         itemTop = currentItemBottom;
       }
+
       // When scrollTop at the end but data cut to small count will reach this
       if (startIndex === undefined) {
         startIndex = 0;
@@ -7879,6 +7972,7 @@ function RawList(props, ref) {
       if (endIndex === undefined) {
         endIndex = mergedData.length - 1;
       }
+
       // Give cache to improve scroll experience
       endIndex = Math.min(endIndex + 1, mergedData.length - 1);
       return {
@@ -7894,6 +7988,7 @@ function RawList(props, ref) {
     fillerOffset = _React$useMemo.offset;
   rangeRef.current.start = start;
   rangeRef.current.end = end;
+
   // ================================= Size =================================
   var _React$useState = React$4.useState({
       width: 0,
@@ -7908,6 +8003,7 @@ function RawList(props, ref) {
       height: sizeInfo.height || sizeInfo.offsetHeight
     });
   };
+
   // Hack on scrollbar to enable flash call
   var verticalScrollBarRef = useRef();
   var horizontalScrollBarRef = useRef();
@@ -7917,6 +8013,7 @@ function RawList(props, ref) {
   var verticalScrollBarSpinSize = React$4.useMemo(function () {
     return getSpinSize(size.height, scrollHeight);
   }, [size.height, scrollHeight]);
+
   // =============================== In Range ===============================
   var maxScrollHeight = scrollHeight - height;
   var maxScrollHeightRef = useRef(maxScrollHeight);
@@ -7932,6 +8029,7 @@ function RawList(props, ref) {
   var isScrollAtTop = offsetTop <= 0;
   var isScrollAtBottom = offsetTop >= maxScrollHeight;
   var originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
+
   // ================================ Scroll ================================
   var getVirtualScrollInfo = function getVirtualScrollInfo() {
     return {
@@ -7940,9 +8038,10 @@ function RawList(props, ref) {
     };
   };
   var lastVirtualScrollInfoRef = useRef(getVirtualScrollInfo());
-  var triggerScroll = useEvent$2(function () {
+  var triggerScroll = useEvent$2(function (params) {
     if (onVirtualScroll) {
-      var nextInfo = getVirtualScrollInfo();
+      var nextInfo = _objectSpread2(_objectSpread2({}, getVirtualScrollInfo()), params);
+
       // Trigger when offset changed
       if (lastVirtualScrollInfoRef.current.x !== nextInfo.x || lastVirtualScrollInfoRef.current.y !== nextInfo.y) {
         onVirtualScroll(nextInfo);
@@ -7961,19 +8060,21 @@ function RawList(props, ref) {
       syncScrollTop(newOffset);
     }
   }
+
   // When data size reduce. It may trigger native scroll event back to fit scroll position
   function onFallbackScroll(e) {
     var newScrollTop = e.currentTarget.scrollTop;
     if (newScrollTop !== offsetTop) {
       syncScrollTop(newScrollTop);
     }
+
     // Trigger origin onScroll
-    onScroll === null || onScroll === void 0 ? void 0 : onScroll(e);
+    onScroll === null || onScroll === void 0 || onScroll(e);
     triggerScroll();
   }
   var keepInHorizontalRange = function keepInHorizontalRange(nextOffsetLeft) {
     var tmpOffsetLeft = nextOffsetLeft;
-    var max = scrollWidth - size.width;
+    var max = !!scrollWidth ? scrollWidth - size.width : 0;
     tmpOffsetLeft = Math.max(tmpOffsetLeft, 0);
     tmpOffsetLeft = Math.min(tmpOffsetLeft, max);
     return tmpOffsetLeft;
@@ -7981,6 +8082,7 @@ function RawList(props, ref) {
   var onWheelDelta = useEvent$2(function (offsetXY, fromHorizontal) {
     if (fromHorizontal) {
       // Horizontal scroll no need sync virtual position
+
       flushSync(function () {
         setOffsetLeft(function (left) {
           var nextOffsetLeft = left + (isRTL ? -offsetXY : offsetXY);
@@ -7995,11 +8097,13 @@ function RawList(props, ref) {
       });
     }
   });
+
   // Since this added in global,should use ref to keep update
   var _useFrameWheel = useFrameWheel(useVirtual, isScrollAtTop, isScrollAtBottom, !!scrollWidth, onWheelDelta),
     _useFrameWheel2 = _slicedToArray(_useFrameWheel, 2),
     onRawWheel = _useFrameWheel2[0],
     onFireFoxScroll = _useFrameWheel2[1];
+
   // Mobile touch move
   useMobileTouchMove(useVirtual, componentRef, function (deltaY, smoothOffset) {
     if (originScroll(deltaY, smoothOffset)) {
@@ -8028,19 +8132,23 @@ function RawList(props, ref) {
       componentEle.removeEventListener('MozMousePixelScroll', onMozMousePixelScroll);
     };
   }, [useVirtual]);
+
   // Sync scroll left
   useLayoutEffect$3(function () {
     if (scrollWidth) {
-      setOffsetLeft(function (left) {
-        return keepInHorizontalRange(left);
+      var newOffsetLeft = keepInHorizontalRange(offsetLeft);
+      setOffsetLeft(newOffsetLeft);
+      triggerScroll({
+        x: newOffsetLeft
       });
     }
   }, [size.width, scrollWidth]);
+
   // ================================= Ref ==================================
   var delayHideScrollBar = function delayHideScrollBar() {
     var _verticalScrollBarRef, _horizontalScrollBarR;
-    (_verticalScrollBarRef = verticalScrollBarRef.current) === null || _verticalScrollBarRef === void 0 ? void 0 : _verticalScrollBarRef.delayHidden();
-    (_horizontalScrollBarR = horizontalScrollBarRef.current) === null || _horizontalScrollBarR === void 0 ? void 0 : _horizontalScrollBarR.delayHidden();
+    (_verticalScrollBarRef = verticalScrollBarRef.current) === null || _verticalScrollBarRef === void 0 || _verticalScrollBarRef.delayHidden();
+    (_horizontalScrollBarR = horizontalScrollBarRef.current) === null || _horizontalScrollBarR === void 0 || _horizontalScrollBarR.delayHidden();
   };
   var _scrollTo = useScrollTo(componentRef, mergedData, heights, itemHeight, getKey, function () {
     return collectHeight(true);
@@ -8057,6 +8165,7 @@ function RawList(props, ref) {
           if (config.left !== undefined) {
             setOffsetLeft(keepInHorizontalRange(config.left));
           }
+
           // Scroll Y
           _scrollTo(config.top);
         } else {
@@ -8065,6 +8174,7 @@ function RawList(props, ref) {
       }
     };
   });
+
   // ================================ Effect ================================
   /** We need told outside that some list not rendered */
   useLayoutEffect$3(function () {
@@ -8073,6 +8183,7 @@ function RawList(props, ref) {
       onVisibleChange(renderList, mergedData);
     }
   }, [start, end, mergedData]);
+
   // ================================ Extra =================================
   var getSize = useGetSize(mergedData, getKey, heights, itemHeight);
   var extraContent = extraRender === null || extraRender === void 0 ? void 0 : extraRender({
@@ -8084,6 +8195,7 @@ function RawList(props, ref) {
     rtl: isRTL,
     getSize: getSize
   });
+
   // ================================ Render ================================
   var listChildren = useChildren(mergedData, start, end, scrollWidth, setInstanceRef, children, sharedConfig);
   var componentStyle = null;
@@ -8140,7 +8252,7 @@ function RawList(props, ref) {
     containerSize: size.height,
     style: styles === null || styles === void 0 ? void 0 : styles.verticalScrollBar,
     thumbStyle: styles === null || styles === void 0 ? void 0 : styles.verticalScrollBarThumb
-  }), inVirtual && scrollWidth && /*#__PURE__*/React$4.createElement(ScrollBar, {
+  }), inVirtual && scrollWidth > size.width && /*#__PURE__*/React$4.createElement(ScrollBar, {
     ref: horizontalScrollBarRef,
     prefixCls: prefixCls,
     scrollOffset: offsetLeft,
@@ -9286,7 +9398,7 @@ var interopRequireWildcard = {exports: {}};
 	      __proto__: null
 	    },
 	    a = Object.defineProperty && Object.getOwnPropertyDescriptor;
-	  for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) {
+	  for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
 	    var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
 	    i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
 	  }