@para-ui/core 4.0.21 → 4.0.24

package/_verture/{index-f59b0bc0.js → index-2a6adf4d.js}

@@ -1,15 +1,16 @@
 import { _ as __rest } from './tslib.es6-55ed4bd2.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { c as clsx, _ as _objectSpread2, r as reactIs, s as supportRef, u as useComposeRef, w as warning, a as _extends, b as _objectWithoutProperties, d as wrapperRaf, e as useEvent$2, f as useLayoutEffect$3, g as composeRef, K as KeyCode, h as fillRef, P as Portal, i as warningOnce, j as useMergedState$2, k as canUseDom$1, l as useMemo$1, n as noteOnce } from './Portal-5bd49559.js';
 import { _ as _toConsumableArray, a as _iterableToArray } from './toConsumableArray-8f4c9589.js';
-import { _ as _defineProperty, t as toPropertyKey } from './defineProperty-6f62bb2a.js';
+import { t as toPropertyKey, _ as _defineProperty } 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';
-import React__default, { useState as useState$1, useMemo as useMemo$1, useCallback, useRef, useEffect } from 'react';
-import ReactDOM, { unstable_batchedUpdates, createPortal, flushSync } from 'react-dom';
+import React__default, { useState as useState$1, useMemo, useCallback, useRef, useEffect } from 'react';
+import ReactDOM, { unstable_batchedUpdates, flushSync } from 'react-dom';
 import CSSMotion from 'rc-motion';
 import { _ as _unsupportedIterableToArray } from './unsupportedIterableToArray-cb478f24.js';
-import clsx from 'clsx';
+import clsx$1 from 'clsx';
 import { _ as _typeof$2 } from './typeof-6ec38efd.js';
 import { conductCheck } from 'rc-tree/lib/utils/conductUtil';
 import Right from '@para-ui/icons/Right';
@@ -25,1402 +26,192 @@ import { u as useFormatMessage } from './useFormatMessage-1fc7c957.js';
 import { UUID } from '@paraview/lib';
 import { s as styleInject } from './style-inject.es-300983ab.js';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function (r) {
-      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
-      _defineProperty(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-    });
-  }
-  return e;
-}
-
-function _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];
+var isMobile = (function () {
+  if (typeof navigator === 'undefined' || typeof window === 'undefined') {
+    return false;
   }
-  return target;
-}
+  var agent = navigator.userAgent || navigator.vendor || window.opera;
+  return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(agent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(agent === null || agent === void 0 ? void 0 : agent.substr(0, 4));
+});
 
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
+var TransBtn = function TransBtn(_ref) {
+  var className = _ref.className,
+    customizeIcon = _ref.customizeIcon,
+    customizeIconProps = _ref.customizeIconProps,
+    _onMouseDown = _ref.onMouseDown,
+    onClick = _ref.onClick,
+    children = _ref.children;
+  var icon;
+  if (typeof customizeIcon === 'function') {
+    icon = customizeIcon(customizeIconProps);
+  } else {
+    icon = customizeIcon;
   }
-  return target;
-}
+  return /*#__PURE__*/React$4.createElement("span", {
+    className: className,
+    onMouseDown: function onMouseDown(event) {
+      event.preventDefault();
+      if (_onMouseDown) {
+        _onMouseDown(event);
+      }
+    },
+    style: {
+      userSelect: 'none',
+      WebkitUserSelect: 'none'
+    },
+    unselectable: "on",
+    onClick: onClick,
+    "aria-hidden": true
+  }, icon !== undefined ? icon : /*#__PURE__*/React$4.createElement("span", {
+    className: clsx(className.split(/\s+/).map(function (cls) {
+      return "".concat(cls, "-icon");
+    }))
+  }, children));
+};
 
-function useEvent$2(callback) {
-  var fnRef = React$4.useRef();
-  fnRef.current = callback;
-  var memoFn = React$4.useCallback(function () {
-    var _fnRef$current;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+function useAllowClear(prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon) {
+  var disabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var mergedSearchValue = arguments.length > 6 ? arguments[6] : undefined;
+  var mode = arguments.length > 7 ? arguments[7] : undefined;
+  var mergedClearIcon = React__default.useMemo(function () {
+    if (_typeof$1(allowClear) === "object") {
+      return allowClear.clearIcon;
     }
-    return (_fnRef$current = fnRef.current) === null || _fnRef$current === void 0 ? void 0 : _fnRef$current.call.apply(_fnRef$current, [fnRef].concat(args));
-  }, []);
-  return memoFn;
+    if (!!clearIcon) return clearIcon;
+  }, [allowClear, clearIcon]);
+  var mergedAllowClear = React__default.useMemo(function () {
+    if (!disabled && !!allowClear && (displayValues.length || mergedSearchValue) && !(mode === 'combobox' && mergedSearchValue === '')) {
+      return true;
+    }
+    return false;
+  }, [allowClear, disabled, displayValues.length, mergedSearchValue, mode]);
+  return {
+    allowClear: mergedAllowClear,
+    clearIcon: /*#__PURE__*/React__default.createElement(TransBtn, {
+      className: "".concat(prefixCls, "-clear"),
+      onMouseDown: onClearMouseDown,
+      customizeIcon: mergedClearIcon
+    }, "\xD7")
+  };
 }
 
-function canUseDom$1() {
-  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+/**
+ * BaseSelect provide some parsed data into context.
+ * You can use this hooks to get them.
+ */
+var BaseSelectContext = /*#__PURE__*/React$4.createContext(null);
+function useBaseProps() {
+  return React$4.useContext(BaseSelectContext);
 }
 
 /**
- * Wrap `React.useLayoutEffect` which will not throw warning message in test env
+ * Similar with `useLock`, but this hook will always execute last value.
+ * When set to `true`, it will keep `true` for a short time even if `false` is set.
  */
-var useInternalLayoutEffect$1 = process.env.NODE_ENV !== 'test' && canUseDom$1() ? React$4.useLayoutEffect : React$4.useEffect;
-var useLayoutEffect$3 = function useLayoutEffect(callback, deps) {
-  var firstMountRef = React$4.useRef(true);
-  useInternalLayoutEffect$1(function () {
-    return callback(firstMountRef.current);
-  }, deps);
-
-  // We tell react that first mount has passed
-  useInternalLayoutEffect$1(function () {
-    firstMountRef.current = false;
-    return function () {
-      firstMountRef.current = true;
-    };
+function useDelayReset() {
+  var timeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+  var _React$useState = React$4.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    bool = _React$useState2[0],
+    setBool = _React$useState2[1];
+  var delayRef = React$4.useRef(null);
+  var cancelLatest = function cancelLatest() {
+    window.clearTimeout(delayRef.current);
+  };
+  React$4.useEffect(function () {
+    return cancelLatest;
   }, []);
-};
-var useLayoutUpdateEffect = function useLayoutUpdateEffect(callback, deps) {
-  useLayoutEffect$3(function (firstMount) {
-    if (!firstMount) {
-      return callback();
-    }
-  }, deps);
-};
+  var delaySetBool = function delaySetBool(value, callback) {
+    cancelLatest();
+    delayRef.current = window.setTimeout(function () {
+      setBool(value);
+      if (callback) {
+        callback();
+      }
+    }, timeout);
+  };
+  return [bool, delaySetBool, cancelLatest];
+}
 
 /**
- * Same as React.useState but `setState` accept `ignoreDestroy` param to not to setState after destroyed.
- * We do not make this auto is to avoid real memory leak.
- * Developer should confirm it's safe to ignore themselves.
+ * Locker return cached mark.
+ * If set to `true`, will return `true` in a short time even if set `false`.
+ * If set to `false` and then set to `true`, will change to `true`.
+ * And after time duration, it will back to `null` automatically.
  */
-function useSafeState$1(defaultValue) {
-  var destroyRef = React$4.useRef(false);
-  var _React$useState = React$4.useState(defaultValue),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    value = _React$useState2[0],
-    setValue = _React$useState2[1];
+function useLock() {
+  var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 250;
+  var lockRef = React$4.useRef(null);
+  var timeoutRef = React$4.useRef(null);
+
+  // Clean up
   React$4.useEffect(function () {
-    destroyRef.current = false;
     return function () {
-      destroyRef.current = true;
+      window.clearTimeout(timeoutRef.current);
     };
   }, []);
-  function safeSetState(updater, ignoreDestroy) {
-    if (ignoreDestroy && destroyRef.current) {
-      return;
+  function doLock(locked) {
+    if (locked || lockRef.current === null) {
+      lockRef.current = locked;
     }
-    setValue(updater);
+    window.clearTimeout(timeoutRef.current);
+    timeoutRef.current = window.setTimeout(function () {
+      lockRef.current = null;
+    }, duration);
   }
-  return [value, safeSetState];
-}
-
-/** We only think `undefined` is empty */
-function hasValue$2(value) {
-  return value !== undefined;
+  return [function () {
+    return lockRef.current;
+  }, doLock];
 }
 
-/**
- * Similar to `useState` but will use props value if provided.
- * Note that internal use rc-util `useState` hook.
- */
-function useMergedState$2(defaultStateValue, option) {
-  var _ref = option || {},
-    defaultValue = _ref.defaultValue,
-    value = _ref.value,
-    onChange = _ref.onChange,
-    postState = _ref.postState;
-
-  // ======================= Init =======================
-  var _useState = useSafeState$1(function () {
-      if (hasValue$2(value)) {
-        return value;
-      } else if (hasValue$2(defaultValue)) {
-        return typeof defaultValue === 'function' ? defaultValue() : defaultValue;
-      } else {
-        return typeof defaultStateValue === 'function' ? defaultStateValue() : defaultStateValue;
+function useSelectTriggerControl(elements, open, triggerOpen, customizedTrigger) {
+  var propsRef = React$4.useRef(null);
+  propsRef.current = {
+    open: open,
+    triggerOpen: triggerOpen,
+    customizedTrigger: customizedTrigger
+  };
+  React$4.useEffect(function () {
+    function onGlobalMouseDown(event) {
+      var _propsRef$current;
+      // If trigger is customized, Trigger will take control of popupVisible
+      if ((_propsRef$current = propsRef.current) !== null && _propsRef$current !== void 0 && _propsRef$current.customizedTrigger) {
+        return;
+      }
+      var target = event.target;
+      if (target.shadowRoot && event.composed) {
+        target = event.composedPath()[0] || target;
+      }
+      if (propsRef.current.open && elements().filter(function (element) {
+        return element;
+      }).every(function (element) {
+        return !element.contains(target) && element !== target;
+      })) {
+        // Should trigger close
+        propsRef.current.triggerOpen(false);
       }
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    innerValue = _useState2[0],
-    setInnerValue = _useState2[1];
-  var mergedValue = value !== undefined ? value : innerValue;
-  var postMergedValue = postState ? postState(mergedValue) : mergedValue;
-
-  // ====================== Change ======================
-  var onChangeFn = useEvent$2(onChange);
-  var _useState3 = useSafeState$1([mergedValue]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    prevValue = _useState4[0],
-    setPrevValue = _useState4[1];
-  useLayoutUpdateEffect(function () {
-    var prev = prevValue[0];
-    if (innerValue !== prev) {
-      onChangeFn(innerValue, prev);
-    }
-  }, [prevValue]);
-
-  // Sync value back to `undefined` when it from control to un-control
-  useLayoutUpdateEffect(function () {
-    if (!hasValue$2(value)) {
-      setInnerValue(value);
     }
-  }, [value]);
-
-  // ====================== Update ======================
-  var triggerChange = useEvent$2(function (updater, ignoreDestroy) {
-    setInnerValue(updater, ignoreDestroy);
-    setPrevValue([mergedValue], ignoreDestroy);
-  });
-  return [postMergedValue, triggerChange];
+    window.addEventListener('mousedown', onGlobalMouseDown);
+    return function () {
+      return window.removeEventListener('mousedown', onGlobalMouseDown);
+    };
+  }, []);
 }
 
-/* eslint-disable no-console */
-var warned = {};
-var preWarningFns = [];
-
-/**
- * Pre warning enable you to parse content before console.error.
- * Modify to null will prevent warning.
- */
-var preMessage = function preMessage(fn) {
-  preWarningFns.push(fn);
-};
+var attributes = "accept acceptCharset accessKey action allowFullScreen allowTransparency\n    alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge\n    charSet checked classID className colSpan cols content contentEditable contextMenu\n    controls coords crossOrigin data dateTime default defer dir disabled download draggable\n    encType form formAction formEncType formMethod formNoValidate formTarget frameBorder\n    headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity\n    is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media\n    mediaGroup method min minLength multiple muted name noValidate nonce open\n    optimum pattern placeholder poster preload radioGroup readOnly rel required\n    reversed role rowSpan rows sandbox scope scoped scrolling seamless selected\n    shape size sizes span spellCheck src srcDoc srcLang srcSet start step style\n    summary tabIndex target title type useMap value width wmode wrap";
+var eventsName = "onCopy onCut onPaste onCompositionEnd onCompositionStart onCompositionUpdate onKeyDown\n    onKeyPress onKeyUp onFocus onBlur onChange onInput onSubmit onClick onContextMenu onDoubleClick\n    onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown\n    onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onSelect onTouchCancel\n    onTouchEnd onTouchMove onTouchStart onScroll onWheel onAbort onCanPlay onCanPlayThrough\n    onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata\n    onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting onLoad onError";
+var propList = "".concat(attributes, " ").concat(eventsName).split(/[\s\n]+/);
 
+/* eslint-enable max-len */
+var ariaPrefix = 'aria-';
+var dataPrefix = 'data-';
+function match(key, prefix) {
+  return key.indexOf(prefix) === 0;
+}
 /**
- * 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) {
-  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');
-    }, message);
-    if (finalMessage) {
-      console.error("Warning: ".concat(finalMessage));
-    }
-  }
-}
-
-/** @see Similar to {@link warning} */
-function note(valid, message) {
-  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');
-    }, message);
-    if (finalMessage) {
-      console.warn("Note: ".concat(finalMessage));
-    }
-  }
-}
-function resetWarned() {
-  warned = {};
-}
-function call(method, valid, message) {
-  if (!valid && !warned[message]) {
-    method(false, 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;
-
-var classnames = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-(function (module) {
-	/* global define */
-
-	(function () {
-
-		var hasOwn = {}.hasOwnProperty;
-
-		function classNames () {
-			var classes = '';
-
-			for (var i = 0; i < arguments.length; i++) {
-				var arg = arguments[i];
-				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;
-		}
-
-		function appendClass (value, newClass) {
-			if (!newClass) {
-				return value;
-			}
-		
-			if (value) {
-				return value + ' ' + newClass;
-			}
-		
-			return value + newClass;
-		}
-
-		if (module.exports) {
-			classNames.default = classNames;
-			module.exports = classNames;
-		} else {
-			window.classNames = classNames;
-		}
-	}());
-} (classnames));
-
-var classNames = classnames.exports;
-
-var isMobile = (function () {
-  if (typeof navigator === 'undefined' || typeof window === 'undefined') {
-    return false;
-  }
-  var agent = navigator.userAgent || navigator.vendor || window.opera;
-  return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(agent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(agent === null || agent === void 0 ? void 0 : agent.substr(0, 4));
-});
-
-/**
- * @ignore
- * some key-codes definition and utils from closure-library
- * @author yiminghe@gmail.com
- */
-
-var KeyCode = {
-  /**
-   * MAC_ENTER
-   */
-  MAC_ENTER: 3,
-  /**
-   * BACKSPACE
-   */
-  BACKSPACE: 8,
-  /**
-   * TAB
-   */
-  TAB: 9,
-  /**
-   * NUMLOCK on FF/Safari Mac
-   */
-  NUM_CENTER: 12,
-  // NUMLOCK on FF/Safari Mac
-  /**
-   * ENTER
-   */
-  ENTER: 13,
-  /**
-   * SHIFT
-   */
-  SHIFT: 16,
-  /**
-   * CTRL
-   */
-  CTRL: 17,
-  /**
-   * ALT
-   */
-  ALT: 18,
-  /**
-   * PAUSE
-   */
-  PAUSE: 19,
-  /**
-   * CAPS_LOCK
-   */
-  CAPS_LOCK: 20,
-  /**
-   * ESC
-   */
-  ESC: 27,
-  /**
-   * SPACE
-   */
-  SPACE: 32,
-  /**
-   * PAGE_UP
-   */
-  PAGE_UP: 33,
-  // also NUM_NORTH_EAST
-  /**
-   * PAGE_DOWN
-   */
-  PAGE_DOWN: 34,
-  // also NUM_SOUTH_EAST
-  /**
-   * END
-   */
-  END: 35,
-  // also NUM_SOUTH_WEST
-  /**
-   * HOME
-   */
-  HOME: 36,
-  // also NUM_NORTH_WEST
-  /**
-   * LEFT
-   */
-  LEFT: 37,
-  // also NUM_WEST
-  /**
-   * UP
-   */
-  UP: 38,
-  // also NUM_NORTH
-  /**
-   * RIGHT
-   */
-  RIGHT: 39,
-  // also NUM_EAST
-  /**
-   * DOWN
-   */
-  DOWN: 40,
-  // also NUM_SOUTH
-  /**
-   * PRINT_SCREEN
-   */
-  PRINT_SCREEN: 44,
-  /**
-   * INSERT
-   */
-  INSERT: 45,
-  // also NUM_INSERT
-  /**
-   * DELETE
-   */
-  DELETE: 46,
-  // also NUM_DELETE
-  /**
-   * ZERO
-   */
-  ZERO: 48,
-  /**
-   * ONE
-   */
-  ONE: 49,
-  /**
-   * TWO
-   */
-  TWO: 50,
-  /**
-   * THREE
-   */
-  THREE: 51,
-  /**
-   * FOUR
-   */
-  FOUR: 52,
-  /**
-   * FIVE
-   */
-  FIVE: 53,
-  /**
-   * SIX
-   */
-  SIX: 54,
-  /**
-   * SEVEN
-   */
-  SEVEN: 55,
-  /**
-   * EIGHT
-   */
-  EIGHT: 56,
-  /**
-   * NINE
-   */
-  NINE: 57,
-  /**
-   * QUESTION_MARK
-   */
-  QUESTION_MARK: 63,
-  // needs localization
-  /**
-   * A
-   */
-  A: 65,
-  /**
-   * B
-   */
-  B: 66,
-  /**
-   * C
-   */
-  C: 67,
-  /**
-   * D
-   */
-  D: 68,
-  /**
-   * E
-   */
-  E: 69,
-  /**
-   * F
-   */
-  F: 70,
-  /**
-   * G
-   */
-  G: 71,
-  /**
-   * H
-   */
-  H: 72,
-  /**
-   * I
-   */
-  I: 73,
-  /**
-   * J
-   */
-  J: 74,
-  /**
-   * K
-   */
-  K: 75,
-  /**
-   * L
-   */
-  L: 76,
-  /**
-   * M
-   */
-  M: 77,
-  /**
-   * N
-   */
-  N: 78,
-  /**
-   * O
-   */
-  O: 79,
-  /**
-   * P
-   */
-  P: 80,
-  /**
-   * Q
-   */
-  Q: 81,
-  /**
-   * R
-   */
-  R: 82,
-  /**
-   * S
-   */
-  S: 83,
-  /**
-   * T
-   */
-  T: 84,
-  /**
-   * U
-   */
-  U: 85,
-  /**
-   * V
-   */
-  V: 86,
-  /**
-   * W
-   */
-  W: 87,
-  /**
-   * X
-   */
-  X: 88,
-  /**
-   * Y
-   */
-  Y: 89,
-  /**
-   * Z
-   */
-  Z: 90,
-  /**
-   * META
-   */
-  META: 91,
-  // WIN_KEY_LEFT
-  /**
-   * WIN_KEY_RIGHT
-   */
-  WIN_KEY_RIGHT: 92,
-  /**
-   * CONTEXT_MENU
-   */
-  CONTEXT_MENU: 93,
-  /**
-   * NUM_ZERO
-   */
-  NUM_ZERO: 96,
-  /**
-   * NUM_ONE
-   */
-  NUM_ONE: 97,
-  /**
-   * NUM_TWO
-   */
-  NUM_TWO: 98,
-  /**
-   * NUM_THREE
-   */
-  NUM_THREE: 99,
-  /**
-   * NUM_FOUR
-   */
-  NUM_FOUR: 100,
-  /**
-   * NUM_FIVE
-   */
-  NUM_FIVE: 101,
-  /**
-   * NUM_SIX
-   */
-  NUM_SIX: 102,
-  /**
-   * NUM_SEVEN
-   */
-  NUM_SEVEN: 103,
-  /**
-   * NUM_EIGHT
-   */
-  NUM_EIGHT: 104,
-  /**
-   * NUM_NINE
-   */
-  NUM_NINE: 105,
-  /**
-   * NUM_MULTIPLY
-   */
-  NUM_MULTIPLY: 106,
-  /**
-   * NUM_PLUS
-   */
-  NUM_PLUS: 107,
-  /**
-   * NUM_MINUS
-   */
-  NUM_MINUS: 109,
-  /**
-   * NUM_PERIOD
-   */
-  NUM_PERIOD: 110,
-  /**
-   * NUM_DIVISION
-   */
-  NUM_DIVISION: 111,
-  /**
-   * F1
-   */
-  F1: 112,
-  /**
-   * F2
-   */
-  F2: 113,
-  /**
-   * F3
-   */
-  F3: 114,
-  /**
-   * F4
-   */
-  F4: 115,
-  /**
-   * F5
-   */
-  F5: 116,
-  /**
-   * F6
-   */
-  F6: 117,
-  /**
-   * F7
-   */
-  F7: 118,
-  /**
-   * F8
-   */
-  F8: 119,
-  /**
-   * F9
-   */
-  F9: 120,
-  /**
-   * F10
-   */
-  F10: 121,
-  /**
-   * F11
-   */
-  F11: 122,
-  /**
-   * F12
-   */
-  F12: 123,
-  /**
-   * NUMLOCK
-   */
-  NUMLOCK: 144,
-  /**
-   * SEMICOLON
-   */
-  SEMICOLON: 186,
-  // needs localization
-  /**
-   * DASH
-   */
-  DASH: 189,
-  // needs localization
-  /**
-   * EQUALS
-   */
-  EQUALS: 187,
-  // needs localization
-  /**
-   * COMMA
-   */
-  COMMA: 188,
-  // needs localization
-  /**
-   * PERIOD
-   */
-  PERIOD: 190,
-  // needs localization
-  /**
-   * SLASH
-   */
-  SLASH: 191,
-  // needs localization
-  /**
-   * APOSTROPHE
-   */
-  APOSTROPHE: 192,
-  // needs localization
-  /**
-   * SINGLE_QUOTE
-   */
-  SINGLE_QUOTE: 222,
-  // needs localization
-  /**
-   * OPEN_SQUARE_BRACKET
-   */
-  OPEN_SQUARE_BRACKET: 219,
-  // needs localization
-  /**
-   * BACKSLASH
-   */
-  BACKSLASH: 220,
-  // needs localization
-  /**
-   * CLOSE_SQUARE_BRACKET
-   */
-  CLOSE_SQUARE_BRACKET: 221,
-  // needs localization
-  /**
-   * WIN_KEY
-   */
-  WIN_KEY: 224,
-  /**
-   * MAC_FF_META
-   */
-  MAC_FF_META: 224,
-  // Firefox (Gecko) fires this for the meta key instead of 91
-  /**
-   * WIN_IME
-   */
-  WIN_IME: 229,
-  // ======================== Function ========================
-  /**
-   * whether text and modified key is entered at the same time.
-   */
-  isTextModifyingKeyEvent: function isTextModifyingKeyEvent(e) {
-    var keyCode = e.keyCode;
-    if (e.altKey && !e.ctrlKey || e.metaKey ||
-    // Function keys don't generate text
-    keyCode >= KeyCode.F1 && keyCode <= KeyCode.F12) {
-      return false;
-    }
-
-    // The following keys are quite harmless, even in combination with
-    // CTRL, ALT or SHIFT.
-    switch (keyCode) {
-      case KeyCode.ALT:
-      case KeyCode.CAPS_LOCK:
-      case KeyCode.CONTEXT_MENU:
-      case KeyCode.CTRL:
-      case KeyCode.DOWN:
-      case KeyCode.END:
-      case KeyCode.ESC:
-      case KeyCode.HOME:
-      case KeyCode.INSERT:
-      case KeyCode.LEFT:
-      case KeyCode.MAC_FF_META:
-      case KeyCode.META:
-      case KeyCode.NUMLOCK:
-      case KeyCode.NUM_CENTER:
-      case KeyCode.PAGE_DOWN:
-      case KeyCode.PAGE_UP:
-      case KeyCode.PAUSE:
-      case KeyCode.PRINT_SCREEN:
-      case KeyCode.RIGHT:
-      case KeyCode.SHIFT:
-      case KeyCode.UP:
-      case KeyCode.WIN_KEY:
-      case KeyCode.WIN_KEY_RIGHT:
-        return false;
-      default:
-        return true;
-    }
-  },
-  /**
-   * whether character is entered.
-   */
-  isCharacterKey: function isCharacterKey(keyCode) {
-    if (keyCode >= KeyCode.ZERO && keyCode <= KeyCode.NINE) {
-      return true;
-    }
-    if (keyCode >= KeyCode.NUM_ZERO && keyCode <= KeyCode.NUM_MULTIPLY) {
-      return true;
-    }
-    if (keyCode >= KeyCode.A && keyCode <= KeyCode.Z) {
-      return true;
-    }
-
-    // Safari sends zero key code for non-latin characters.
-    if (window.navigator.userAgent.indexOf('WebKit') !== -1 && keyCode === 0) {
-      return true;
-    }
-    switch (keyCode) {
-      case KeyCode.SPACE:
-      case KeyCode.QUESTION_MARK:
-      case KeyCode.NUM_PLUS:
-      case KeyCode.NUM_MINUS:
-      case KeyCode.NUM_PERIOD:
-      case KeyCode.NUM_DIVISION:
-      case KeyCode.SEMICOLON:
-      case KeyCode.DASH:
-      case KeyCode.EQUALS:
-      case KeyCode.COMMA:
-      case KeyCode.PERIOD:
-      case KeyCode.SLASH:
-      case KeyCode.APOSTROPHE:
-      case KeyCode.SINGLE_QUOTE:
-      case KeyCode.OPEN_SQUARE_BRACKET:
-      case KeyCode.BACKSLASH:
-      case KeyCode.CLOSE_SQUARE_BRACKET:
-        return true;
-      default:
-        return false;
-    }
-  }
-};
-
-var reactIs = {exports: {}};
-
-var reactIs_production_min = {};
-
-/**
- * @license React
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactIs_production_min;
-
-function requireReactIs_production_min () {
-	if (hasRequiredReactIs_production_min) return reactIs_production_min;
-	hasRequiredReactIs_production_min = 1;
-var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k=Symbol.for("react.server_context"),l=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),n=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),t=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
-	function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}reactIs_production_min.ContextConsumer=h;reactIs_production_min.ContextProvider=g;reactIs_production_min.Element=b;reactIs_production_min.ForwardRef=l;reactIs_production_min.Fragment=d;reactIs_production_min.Lazy=q;reactIs_production_min.Memo=p;reactIs_production_min.Portal=c;reactIs_production_min.Profiler=f;reactIs_production_min.StrictMode=e;reactIs_production_min.Suspense=m;
-	reactIs_production_min.SuspenseList=n;reactIs_production_min.isAsyncMode=function(){return !1};reactIs_production_min.isConcurrentMode=function(){return !1};reactIs_production_min.isContextConsumer=function(a){return v(a)===h};reactIs_production_min.isContextProvider=function(a){return v(a)===g};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min.isForwardRef=function(a){return v(a)===l};reactIs_production_min.isFragment=function(a){return v(a)===d};reactIs_production_min.isLazy=function(a){return v(a)===q};reactIs_production_min.isMemo=function(a){return v(a)===p};
-	reactIs_production_min.isPortal=function(a){return v(a)===c};reactIs_production_min.isProfiler=function(a){return v(a)===f};reactIs_production_min.isStrictMode=function(a){return v(a)===e};reactIs_production_min.isSuspense=function(a){return v(a)===m};reactIs_production_min.isSuspenseList=function(a){return v(a)===n};
-	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};reactIs_production_min.typeOf=v;
-	return reactIs_production_min;
-}
-
-var reactIs_development = {};
-
-/**
- * @license React
- * react-is.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactIs_development;
-
-function requireReactIs_development () {
-	if (hasRequiredReactIs_development) return reactIs_development;
-	hasRequiredReactIs_development = 1;
-
-	if (process.env.NODE_ENV !== "production") {
-	  (function() {
-
-	// ATTENTION
-	// When adding new symbols to this file,
-	// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-	// The Symbol used to tag the ReactElement-like types.
-	var REACT_ELEMENT_TYPE = Symbol.for('react.element');
-	var REACT_PORTAL_TYPE = Symbol.for('react.portal');
-	var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
-	var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
-	var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
-	var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
-	var REACT_CONTEXT_TYPE = Symbol.for('react.context');
-	var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
-	var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
-	var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
-	var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
-	var REACT_MEMO_TYPE = Symbol.for('react.memo');
-	var REACT_LAZY_TYPE = Symbol.for('react.lazy');
-	var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
-
-	// -----------------------------------------------------------------------------
-
-	var enableScopeAPI = false; // Experimental Create Event Handle API.
-	var enableCacheElement = false;
-	var enableTransitionTracing = false; // No known bugs, but needs performance testing
-
-	var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
-	// stuff. Intended to enable React core members to more easily debug scheduling
-	// issues in DEV builds.
-
-	var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
-
-	var REACT_MODULE_REFERENCE;
-
-	{
-	  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
-	}
-
-	function isValidElementType(type) {
-	  if (typeof type === 'string' || typeof type === 'function') {
-	    return true;
-	  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
-
-
-	  if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing  || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden  || type === REACT_OFFSCREEN_TYPE || enableScopeAPI  || enableCacheElement  || enableTransitionTracing ) {
-	    return true;
-	  }
-
-	  if (typeof type === 'object' && type !== null) {
-	    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
-	    // types supported by any Flight configuration anywhere since
-	    // we don't know which Flight build this will end up being used
-	    // with.
-	    type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
-	      return true;
-	    }
-	  }
-
-	  return false;
-	}
-
-	function typeOf(object) {
-	  if (typeof object === 'object' && object !== null) {
-	    var $$typeof = object.$$typeof;
-
-	    switch ($$typeof) {
-	      case REACT_ELEMENT_TYPE:
-	        var type = object.type;
-
-	        switch (type) {
-	          case REACT_FRAGMENT_TYPE:
-	          case REACT_PROFILER_TYPE:
-	          case REACT_STRICT_MODE_TYPE:
-	          case REACT_SUSPENSE_TYPE:
-	          case REACT_SUSPENSE_LIST_TYPE:
-	            return type;
-
-	          default:
-	            var $$typeofType = type && type.$$typeof;
-
-	            switch ($$typeofType) {
-	              case REACT_SERVER_CONTEXT_TYPE:
-	              case REACT_CONTEXT_TYPE:
-	              case REACT_FORWARD_REF_TYPE:
-	              case REACT_LAZY_TYPE:
-	              case REACT_MEMO_TYPE:
-	              case REACT_PROVIDER_TYPE:
-	                return $$typeofType;
-
-	              default:
-	                return $$typeof;
-	            }
-
-	        }
-
-	      case REACT_PORTAL_TYPE:
-	        return $$typeof;
-	    }
-	  }
-
-	  return undefined;
-	}
-	var ContextConsumer = REACT_CONTEXT_TYPE;
-	var ContextProvider = REACT_PROVIDER_TYPE;
-	var Element = REACT_ELEMENT_TYPE;
-	var ForwardRef = REACT_FORWARD_REF_TYPE;
-	var Fragment = REACT_FRAGMENT_TYPE;
-	var Lazy = REACT_LAZY_TYPE;
-	var Memo = REACT_MEMO_TYPE;
-	var Portal = REACT_PORTAL_TYPE;
-	var Profiler = REACT_PROFILER_TYPE;
-	var StrictMode = REACT_STRICT_MODE_TYPE;
-	var Suspense = REACT_SUSPENSE_TYPE;
-	var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
-	var hasWarnedAboutDeprecatedIsAsyncMode = false;
-	var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
-
-	function isAsyncMode(object) {
-	  {
-	    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-	      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
-
-	      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
-	    }
-	  }
-
-	  return false;
-	}
-	function isConcurrentMode(object) {
-	  {
-	    if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
-	      hasWarnedAboutDeprecatedIsConcurrentMode = true; // Using console['warn'] to evade Babel and ESLint
-
-	      console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
-	    }
-	  }
-
-	  return false;
-	}
-	function isContextConsumer(object) {
-	  return typeOf(object) === REACT_CONTEXT_TYPE;
-	}
-	function isContextProvider(object) {
-	  return typeOf(object) === REACT_PROVIDER_TYPE;
-	}
-	function isElement(object) {
-	  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-	}
-	function isForwardRef(object) {
-	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
-	}
-	function isFragment(object) {
-	  return typeOf(object) === REACT_FRAGMENT_TYPE;
-	}
-	function isLazy(object) {
-	  return typeOf(object) === REACT_LAZY_TYPE;
-	}
-	function isMemo(object) {
-	  return typeOf(object) === REACT_MEMO_TYPE;
-	}
-	function isPortal(object) {
-	  return typeOf(object) === REACT_PORTAL_TYPE;
-	}
-	function isProfiler(object) {
-	  return typeOf(object) === REACT_PROFILER_TYPE;
-	}
-	function isStrictMode(object) {
-	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
-	}
-	function isSuspense(object) {
-	  return typeOf(object) === REACT_SUSPENSE_TYPE;
-	}
-	function isSuspenseList(object) {
-	  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
-	}
-
-	reactIs_development.ContextConsumer = ContextConsumer;
-	reactIs_development.ContextProvider = ContextProvider;
-	reactIs_development.Element = Element;
-	reactIs_development.ForwardRef = ForwardRef;
-	reactIs_development.Fragment = Fragment;
-	reactIs_development.Lazy = Lazy;
-	reactIs_development.Memo = Memo;
-	reactIs_development.Portal = Portal;
-	reactIs_development.Profiler = Profiler;
-	reactIs_development.StrictMode = StrictMode;
-	reactIs_development.Suspense = Suspense;
-	reactIs_development.SuspenseList = SuspenseList;
-	reactIs_development.isAsyncMode = isAsyncMode;
-	reactIs_development.isConcurrentMode = isConcurrentMode;
-	reactIs_development.isContextConsumer = isContextConsumer;
-	reactIs_development.isContextProvider = isContextProvider;
-	reactIs_development.isElement = isElement;
-	reactIs_development.isForwardRef = isForwardRef;
-	reactIs_development.isFragment = isFragment;
-	reactIs_development.isLazy = isLazy;
-	reactIs_development.isMemo = isMemo;
-	reactIs_development.isPortal = isPortal;
-	reactIs_development.isProfiler = isProfiler;
-	reactIs_development.isStrictMode = isStrictMode;
-	reactIs_development.isSuspense = isSuspense;
-	reactIs_development.isSuspenseList = isSuspenseList;
-	reactIs_development.isValidElementType = isValidElementType;
-	reactIs_development.typeOf = typeOf;
-	  })();
-	}
-	return reactIs_development;
-}
-
-(function (module) {
-
-	if (process.env.NODE_ENV === 'production') {
-	  module.exports = requireReactIs_production_min();
-	} else {
-	  module.exports = requireReactIs_development();
-	}
-} (reactIs));
-
-function useMemo(getValue, condition, shouldUpdate) {
-  var cacheRef = React$4.useRef({});
-  if (!('value' in cacheRef.current) || shouldUpdate(cacheRef.current.condition, condition)) {
-    cacheRef.current.value = getValue();
-    cacheRef.current.condition = condition;
-  }
-  return cacheRef.current.value;
-}
-
-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() {
-  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;
-  });
-  if (refList.length <= 1) {
-    return refList[0];
-  }
-  return function (node) {
-    refs.forEach(function (ref) {
-      fillRef(ref, node);
-    });
-  };
-}
-function useComposeRef() {
-  for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    refs[_key2] = arguments[_key2];
-  }
-  return useMemo(function () {
-    return composeRef.apply(void 0, refs);
-  }, refs, function (prev, next) {
-    return prev.length !== next.length || prev.every(function (ref, i) {
-      return ref !== next[i];
-    });
-  });
-}
-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) && 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) && nodeOrComponent.$$typeof !== reactIs.exports.ForwardRef) {
-    return false;
-  }
-  return true;
-}
-/* eslint-enable */
-
-var TransBtn = function TransBtn(_ref) {
-  var className = _ref.className,
-    customizeIcon = _ref.customizeIcon,
-    customizeIconProps = _ref.customizeIconProps,
-    _onMouseDown = _ref.onMouseDown,
-    onClick = _ref.onClick,
-    children = _ref.children;
-  var icon;
-  if (typeof customizeIcon === 'function') {
-    icon = customizeIcon(customizeIconProps);
-  } else {
-    icon = customizeIcon;
-  }
-  return /*#__PURE__*/React$4.createElement("span", {
-    className: className,
-    onMouseDown: function onMouseDown(event) {
-      event.preventDefault();
-      if (_onMouseDown) {
-        _onMouseDown(event);
-      }
-    },
-    style: {
-      userSelect: 'none',
-      WebkitUserSelect: 'none'
-    },
-    unselectable: "on",
-    onClick: onClick,
-    "aria-hidden": true
-  }, icon !== undefined ? icon : /*#__PURE__*/React$4.createElement("span", {
-    className: classNames(className.split(/\s+/).map(function (cls) {
-      return "".concat(cls, "-icon");
-    }))
-  }, children));
-};
-
-function useAllowClear(prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon) {
-  var disabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var mergedSearchValue = arguments.length > 6 ? arguments[6] : undefined;
-  var mode = arguments.length > 7 ? arguments[7] : undefined;
-  var mergedClearIcon = React__default.useMemo(function () {
-    if (_typeof$1(allowClear) === "object") {
-      return allowClear.clearIcon;
-    }
-    if (!!clearIcon) return clearIcon;
-  }, [allowClear, clearIcon]);
-  var mergedAllowClear = React__default.useMemo(function () {
-    if (!disabled && !!allowClear && (displayValues.length || mergedSearchValue) && !(mode === 'combobox' && mergedSearchValue === '')) {
-      return true;
-    }
-    return false;
-  }, [allowClear, disabled, displayValues.length, mergedSearchValue, mode]);
-  return {
-    allowClear: mergedAllowClear,
-    clearIcon: /*#__PURE__*/React__default.createElement(TransBtn, {
-      className: "".concat(prefixCls, "-clear"),
-      onMouseDown: onClearMouseDown,
-      customizeIcon: mergedClearIcon
-    }, "\xD7")
-  };
-}
-
-/**
- * BaseSelect provide some parsed data into context.
- * You can use this hooks to get them.
- */
-var BaseSelectContext = /*#__PURE__*/React$4.createContext(null);
-function useBaseProps() {
-  return React$4.useContext(BaseSelectContext);
-}
-
-/**
- * Similar with `useLock`, but this hook will always execute last value.
- * When set to `true`, it will keep `true` for a short time even if `false` is set.
- */
-function useDelayReset() {
-  var timeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
-  var _React$useState = React$4.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    bool = _React$useState2[0],
-    setBool = _React$useState2[1];
-  var delayRef = React$4.useRef(null);
-  var cancelLatest = function cancelLatest() {
-    window.clearTimeout(delayRef.current);
-  };
-  React$4.useEffect(function () {
-    return cancelLatest;
-  }, []);
-  var delaySetBool = function delaySetBool(value, callback) {
-    cancelLatest();
-    delayRef.current = window.setTimeout(function () {
-      setBool(value);
-      if (callback) {
-        callback();
-      }
-    }, timeout);
-  };
-  return [bool, delaySetBool, cancelLatest];
-}
-
-/**
- * Locker return cached mark.
- * If set to `true`, will return `true` in a short time even if set `false`.
- * If set to `false` and then set to `true`, will change to `true`.
- * And after time duration, it will back to `null` automatically.
- */
-function useLock() {
-  var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 250;
-  var lockRef = React$4.useRef(null);
-  var timeoutRef = React$4.useRef(null);
-
-  // Clean up
-  React$4.useEffect(function () {
-    return function () {
-      window.clearTimeout(timeoutRef.current);
-    };
-  }, []);
-  function doLock(locked) {
-    if (locked || lockRef.current === null) {
-      lockRef.current = locked;
-    }
-    window.clearTimeout(timeoutRef.current);
-    timeoutRef.current = window.setTimeout(function () {
-      lockRef.current = null;
-    }, duration);
-  }
-  return [function () {
-    return lockRef.current;
-  }, doLock];
-}
-
-function useSelectTriggerControl(elements, open, triggerOpen, customizedTrigger) {
-  var propsRef = React$4.useRef(null);
-  propsRef.current = {
-    open: open,
-    triggerOpen: triggerOpen,
-    customizedTrigger: customizedTrigger
-  };
-  React$4.useEffect(function () {
-    function onGlobalMouseDown(event) {
-      var _propsRef$current;
-      // If trigger is customized, Trigger will take control of popupVisible
-      if ((_propsRef$current = propsRef.current) !== null && _propsRef$current !== void 0 && _propsRef$current.customizedTrigger) {
-        return;
-      }
-      var target = event.target;
-      if (target.shadowRoot && event.composed) {
-        target = event.composedPath()[0] || target;
-      }
-      if (propsRef.current.open && elements().filter(function (element) {
-        return element;
-      }).every(function (element) {
-        return !element.contains(target) && element !== target;
-      })) {
-        // Should trigger close
-        propsRef.current.triggerOpen(false);
-      }
-    }
-    window.addEventListener('mousedown', onGlobalMouseDown);
-    return function () {
-      return window.removeEventListener('mousedown', onGlobalMouseDown);
-    };
-  }, []);
-}
-
-var attributes = "accept acceptCharset accessKey action allowFullScreen allowTransparency\n    alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge\n    charSet checked classID className colSpan cols content contentEditable contextMenu\n    controls coords crossOrigin data dateTime default defer dir disabled download draggable\n    encType form formAction formEncType formMethod formNoValidate formTarget frameBorder\n    headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity\n    is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media\n    mediaGroup method min minLength multiple muted name noValidate nonce open\n    optimum pattern placeholder poster preload radioGroup readOnly rel required\n    reversed role rowSpan rows sandbox scope scoped scrolling seamless selected\n    shape size sizes span spellCheck src srcDoc srcLang srcSet start step style\n    summary tabIndex target title type useMap value width wmode wrap";
-var eventsName = "onCopy onCut onPaste onCompositionEnd onCompositionStart onCompositionUpdate onKeyDown\n    onKeyPress onKeyUp onFocus onBlur onChange onInput onSubmit onClick onContextMenu onDoubleClick\n    onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown\n    onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onSelect onTouchCancel\n    onTouchEnd onTouchMove onTouchStart onScroll onWheel onAbort onCanPlay onCanPlayThrough\n    onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata\n    onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting onLoad onError";
-var propList = "".concat(attributes, " ").concat(eventsName).split(/[\s\n]+/);
-
-/* eslint-enable max-len */
-var ariaPrefix = 'aria-';
-var dataPrefix = 'data-';
-function match(key, prefix) {
-  return key.indexOf(prefix) === 0;
-}
-/**
- * Picker props from exist props with filter
- * @param props Passed props
- * @param ariaOnly boolean | { aria?: boolean; data?: boolean; attr?: boolean; } filter config
+ * Picker props from exist props with filter
+ * @param props Passed props
+ * @param ariaOnly boolean | { aria?: boolean; data?: boolean; attr?: boolean; } filter config
  */
 function pickAttrs(props) {
   var ariaOnly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -2781,7 +1572,7 @@ function InternalItem(props, ref) {
     overflowProps['aria-hidden'] = true;
   }
   var itemNode = /*#__PURE__*/React$4.createElement(Component, _extends({
-    className: classNames(!invalidate && prefixCls, className),
+    className: clsx(!invalidate && prefixCls, className),
     style: _objectSpread2(_objectSpread2({}, overflowStyle), style)
   }, overflowProps, restProps, {
     ref: ref
@@ -2793,66 +1584,12 @@ function InternalItem(props, ref) {
         internalRegisterSize(offsetWidth);
       },
       disabled: responsiveDisabled
-    }, itemNode);
-  }
-  return itemNode;
-}
-var Item$1 = /*#__PURE__*/React$4.forwardRef(InternalItem);
-Item$1.displayName = 'Item';
-
-var raf = function raf(callback) {
-  return +setTimeout(callback, 16);
-};
-var caf = function caf(num) {
-  return clearTimeout(num);
-};
-if (typeof window !== 'undefined' && 'requestAnimationFrame' in window) {
-  raf = function raf(callback) {
-    return window.requestAnimationFrame(callback);
-  };
-  caf = function caf(handle) {
-    return window.cancelAnimationFrame(handle);
-  };
-}
-var rafUUID = 0;
-var rafIds = new Map();
-function cleanup(id) {
-  rafIds.delete(id);
-}
-var wrapperRaf = function wrapperRaf(callback) {
-  var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  rafUUID += 1;
-  var id = rafUUID;
-  function callRef(leftTimes) {
-    if (leftTimes === 0) {
-      // Clean up
-      cleanup(id);
-
-      // Trigger
-      callback();
-    } else {
-      // Next raf
-      var realId = raf(function () {
-        callRef(leftTimes - 1);
-      });
-
-      // Bind real raf id
-      rafIds.set(id, realId);
-    }
+    }, itemNode);
   }
-  callRef(times);
-  return id;
-};
-wrapperRaf.cancel = function (id) {
-  var realId = rafIds.get(id);
-  cleanup(id);
-  return caf(realId);
-};
-if (process.env.NODE_ENV !== 'production') {
-  wrapperRaf.ids = function () {
-    return rafIds;
-  };
+  return itemNode;
 }
+var Item$1 = /*#__PURE__*/React$4.forwardRef(InternalItem);
+Item$1.displayName = 'Item';
 
 function channelUpdate(callback) {
   if (typeof MessageChannel === 'undefined') {
@@ -2932,7 +1669,7 @@ var InternalRawItem = function InternalRawItem(props, ref) {
     value: null
   }, /*#__PURE__*/React$4.createElement(Item$1, _extends({
     ref: ref,
-    className: classNames(contextClassName, className)
+    className: clsx(contextClassName, className)
   }, restContext, restProps)));
 };
 var RawItem = /*#__PURE__*/React$4.forwardRef(InternalRawItem);
@@ -3018,7 +1755,7 @@ function Overflow(props, ref) {
    * When is `responsive`, we will always render rest node to get the real width of it for calculation
    */
   var showRest = shouldResponsive || typeof maxCount === 'number' && data.length > maxCount;
-  var mergedData = useMemo$1(function () {
+  var mergedData = useMemo(function () {
     var items = data;
     if (shouldResponsive) {
       if (containerWidth === null && fullySSR) {
@@ -3031,7 +1768,7 @@ function Overflow(props, ref) {
     }
     return items;
   }, [data, itemWidth, containerWidth, maxCount, shouldResponsive]);
-  var omittedItems = useMemo$1(function () {
+  var omittedItems = useMemo(function () {
     if (shouldResponsive) {
       return data.slice(mergedDisplayCount + 1);
     }
@@ -3190,7 +1927,7 @@ function Overflow(props, ref) {
     }, renderRawRest(omittedItems));
   }
   var overflowNode = /*#__PURE__*/React$4.createElement(Component, _extends({
-    className: classNames(!invalidate && prefixCls, className),
+    className: clsx(!invalidate && prefixCls, className),
     style: style,
     ref: ref
   }, restProps), mergedData.map(internalRenderItemNode), showRest ? restNode : null, suffix && /*#__PURE__*/React$4.createElement(Item$1, _extends({}, itemSharedProps, {
@@ -3258,7 +1995,7 @@ var Input = function Input(_ref, ref) {
     tabIndex: tabIndex,
     autoComplete: autoComplete || 'off',
     autoFocus: autoFocus,
-    className: classNames("".concat(prefixCls, "-selection-search-input"), (_inputNode2 = inputNode) === null || _inputNode2 === void 0 ? void 0 : (_inputNode2$props = _inputNode2.props) === null || _inputNode2$props === void 0 ? void 0 : _inputNode2$props.className),
+    className: clsx("".concat(prefixCls, "-selection-search-input"), (_inputNode2 = inputNode) === null || _inputNode2 === void 0 ? void 0 : (_inputNode2$props = _inputNode2.props) === null || _inputNode2$props === void 0 ? void 0 : _inputNode2$props.className),
     role: 'combobox',
     'aria-label': 'Search',
     'aria-expanded': open,
@@ -3425,7 +2162,7 @@ var SelectSelector = function SelectSelector(props) {
   // >>> Render Selector Node. Includes Item & Rest
   function defaultRenderSelector(item, content, itemDisabled, closable, onClose) {
     return /*#__PURE__*/React$4.createElement("span", {
-      className: classNames("".concat(selectionPrefixCls, "-item"), _defineProperty({}, "".concat(selectionPrefixCls, "-item-disabled"), itemDisabled)),
+      className: clsx("".concat(selectionPrefixCls, "-item"), _defineProperty({}, "".concat(selectionPrefixCls, "-item-disabled"), itemDisabled)),
       title: getTitle(item)
     }, /*#__PURE__*/React$4.createElement("span", {
       className: "".concat(selectionPrefixCls, "-item-content")
@@ -3782,436 +2519,6 @@ var Selector = function Selector(props, ref) {
 var ForwardSelector = /*#__PURE__*/React$4.forwardRef(Selector);
 ForwardSelector.displayName = 'Selector';
 
-var OrderContext = /*#__PURE__*/React$4.createContext(null);
-
-var EMPTY_LIST = [];
-
-/**
- * Will add `div` to document. Nest call will keep order
- * @param render Render DOM in document
- */
-function useDom(render, debug) {
-  var _React$useState = React$4.useState(function () {
-      if (!canUseDom$1()) {
-        return null;
-      }
-      var defaultEle = document.createElement('div');
-      if (process.env.NODE_ENV !== 'production' && debug) {
-        defaultEle.setAttribute('data-debug', debug);
-      }
-      return defaultEle;
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 1),
-    ele = _React$useState2[0];
-
-  // ========================== Order ==========================
-  var appendedRef = React$4.useRef(false);
-  var queueCreate = React$4.useContext(OrderContext);
-  var _React$useState3 = React$4.useState(EMPTY_LIST),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    queue = _React$useState4[0],
-    setQueue = _React$useState4[1];
-  var mergedQueueCreate = queueCreate || (appendedRef.current ? undefined : function (appendFn) {
-    setQueue(function (origin) {
-      var newQueue = [appendFn].concat(_toConsumableArray(origin));
-      return newQueue;
-    });
-  });
-
-  // =========================== DOM ===========================
-  function append() {
-    if (!ele.parentElement) {
-      document.body.appendChild(ele);
-    }
-    appendedRef.current = true;
-  }
-  function cleanup() {
-    var _ele$parentElement;
-    (_ele$parentElement = ele.parentElement) === null || _ele$parentElement === void 0 ? void 0 : _ele$parentElement.removeChild(ele);
-    appendedRef.current = false;
-  }
-  useLayoutEffect$3(function () {
-    if (render) {
-      if (queueCreate) {
-        queueCreate(append);
-      } else {
-        append();
-      }
-    } else {
-      cleanup();
-    }
-    return cleanup;
-  }, [render]);
-  useLayoutEffect$3(function () {
-    if (queue.length) {
-      queue.forEach(function (appendFn) {
-        return appendFn();
-      });
-      setQueue(EMPTY_LIST);
-    }
-  }, [queue]);
-  return [ele, mergedQueueCreate];
-}
-
-function contains(root, n) {
-  if (!root) {
-    return false;
-  }
-
-  // Use native if support
-  if (root.contains) {
-    return root.contains(n);
-  }
-
-  // `document.contains` not support with IE11
-  var node = n;
-  while (node) {
-    if (node === root) {
-      return true;
-    }
-    node = node.parentNode;
-  }
-  return false;
-}
-
-var APPEND_ORDER = 'data-rc-order';
-var APPEND_PRIORITY = 'data-rc-priority';
-var MARK_KEY = "rc-util-key";
-var containerCache = new Map();
-function getMark() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    mark = _ref.mark;
-  if (mark) {
-    return mark.startsWith('data-') ? mark : "data-".concat(mark);
-  }
-  return MARK_KEY;
-}
-function getContainer(option) {
-  if (option.attachTo) {
-    return option.attachTo;
-  }
-  var head = document.querySelector('head');
-  return head || document.body;
-}
-function getOrder(prepend) {
-  if (prepend === 'queue') {
-    return 'prependQueue';
-  }
-  return prepend ? 'prepend' : 'append';
-}
-
-/**
- * Find style which inject by rc-util
- */
-function findStyles(container) {
-  return Array.from((containerCache.get(container) || container).children).filter(function (node) {
-    return node.tagName === 'STYLE';
-  });
-}
-function injectCSS(css) {
-  var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  if (!canUseDom$1()) {
-    return null;
-  }
-  var csp = option.csp,
-    prepend = option.prepend,
-    _option$priority = option.priority,
-    priority = _option$priority === void 0 ? 0 : _option$priority;
-  var mergedOrder = getOrder(prepend);
-  var isPrependQueue = mergedOrder === 'prependQueue';
-  var styleNode = document.createElement('style');
-  styleNode.setAttribute(APPEND_ORDER, mergedOrder);
-  if (isPrependQueue && priority) {
-    styleNode.setAttribute(APPEND_PRIORITY, "".concat(priority));
-  }
-  if (csp !== null && csp !== void 0 && csp.nonce) {
-    styleNode.nonce = csp === null || csp === void 0 ? void 0 : csp.nonce;
-  }
-  styleNode.innerHTML = css;
-  var container = getContainer(option);
-  var firstChild = container.firstChild;
-  if (prepend) {
-    // If is queue `prepend`, it will prepend first style and then append rest style
-    if (isPrependQueue) {
-      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;
-        }
-
-        // Ignore style which priority less then new style
-        var nodePriority = Number(node.getAttribute(APPEND_PRIORITY) || 0);
-        return priority >= nodePriority;
-      });
-      if (existStyle.length) {
-        container.insertBefore(styleNode, existStyle[existStyle.length - 1].nextSibling);
-        return styleNode;
-      }
-    }
-
-    // Use `insertBefore` as `prepend`
-    container.insertBefore(styleNode, firstChild);
-  } else {
-    container.appendChild(styleNode);
-  }
-  return styleNode;
-}
-function findExistNode(key) {
-  var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var container = getContainer(option);
-  return (option.styles || findStyles(container)).find(function (node) {
-    return node.getAttribute(getMark(option)) === key;
-  });
-}
-function removeCSS(key) {
-  var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var existNode = findExistNode(key, option);
-  if (existNode) {
-    var container = getContainer(option);
-    container.removeChild(existNode);
-  }
-}
-
-/**
- * qiankun will inject `appendChild` to insert into other
- */
-function syncRealContainer(container, option) {
-  var cachedRealContainer = containerCache.get(container);
-
-  // Find real container when not cached or cached container removed
-  if (!cachedRealContainer || !contains(document, cachedRealContainer)) {
-    var placeholderStyle = injectCSS('', option);
-    var parentNode = placeholderStyle.parentNode;
-    containerCache.set(container, parentNode);
-    container.removeChild(placeholderStyle);
-  }
-}
-function updateCSS(css, key) {
-  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);
-  var existNode = findExistNode(key, option);
-  if (existNode) {
-    var _option$csp, _option$csp2;
-    if ((_option$csp = option.csp) !== null && _option$csp !== void 0 && _option$csp.nonce && existNode.nonce !== ((_option$csp2 = option.csp) === null || _option$csp2 === void 0 ? void 0 : _option$csp2.nonce)) {
-      var _option$csp3;
-      existNode.nonce = (_option$csp3 = option.csp) === null || _option$csp3 === void 0 ? void 0 : _option$csp3.nonce;
-    }
-    if (existNode.innerHTML !== css) {
-      existNode.innerHTML = css;
-    }
-    return existNode;
-  }
-  var newNode = injectCSS(css, option);
-  newNode.setAttribute(getMark(option), key);
-  return newNode;
-}
-
-/* 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;
-
-  // Clean up
-  document.body.removeChild(measureEle);
-  removeCSS(randomId);
-  return {
-    width: scrollWidth,
-    height: scrollHeight
-  };
-}
-function getTargetScrollBarSize(target) {
-  if (typeof document === 'undefined' || !target || !(target instanceof Element)) {
-    return {
-      width: 0,
-      height: 0
-    };
-  }
-  return measureScrollbarSize(target);
-}
-
-/**
- * Test usage export. Do not use in your production
- */
-function isBodyOverflowing() {
-  return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth;
-}
-
-var UNIQUE_ID = "rc-util-locker-".concat(Date.now());
-var uuid$3 = 0;
-function useScrollLocker(lock) {
-  var mergedLock = !!lock;
-  var _React$useState = React$4.useState(function () {
-      uuid$3 += 1;
-      return "".concat(UNIQUE_ID, "_").concat(uuid$3);
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 1),
-    id = _React$useState2[0];
-  useLayoutEffect$3(function () {
-    if (mergedLock) {
-      var scrollbarSize = getTargetScrollBarSize(document.body).width;
-      var isOverflow = isBodyOverflowing();
-      updateCSS("\nhtml body {\n  overflow-y: hidden;\n  ".concat(isOverflow ? "width: calc(100% - ".concat(scrollbarSize, "px);") : '', "\n}"), id);
-    } else {
-      removeCSS(id);
-    }
-    return function () {
-      removeCSS(id);
-    };
-  }, [mergedLock, id]);
-}
-
-var inline = false;
-function inlineMock(nextInline) {
-  if (typeof nextInline === 'boolean') {
-    inline = nextInline;
-  }
-  return inline;
-}
-
-var getPortalContainer = function getPortalContainer(getContainer) {
-  if (getContainer === false) {
-    return false;
-  }
-  if (!canUseDom$1() || !getContainer) {
-    return null;
-  }
-  if (typeof getContainer === 'string') {
-    return document.querySelector(getContainer);
-  }
-  if (typeof getContainer === 'function') {
-    return getContainer();
-  }
-  return getContainer;
-};
-var Portal = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
-  var open = props.open,
-    autoLock = props.autoLock,
-    getContainer = props.getContainer,
-    debug = props.debug,
-    _props$autoDestroy = props.autoDestroy,
-    autoDestroy = _props$autoDestroy === void 0 ? true : _props$autoDestroy,
-    children = props.children;
-  var _React$useState = React$4.useState(open),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    shouldRender = _React$useState2[0],
-    setShouldRender = _React$useState2[1];
-  var mergedRender = shouldRender || open;
-
-  // ========================= Warning =========================
-  if (process.env.NODE_ENV !== 'production') {
-    warningOnce(canUseDom$1() || !open, "Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.");
-  }
-
-  // ====================== Should Render ======================
-  React$4.useEffect(function () {
-    if (autoDestroy || open) {
-      setShouldRender(open);
-    }
-  }, [open, autoDestroy]);
-
-  // ======================== Container ========================
-  var _React$useState3 = React$4.useState(function () {
-      return getPortalContainer(getContainer);
-    }),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    innerContainer = _React$useState4[0],
-    setInnerContainer = _React$useState4[1];
-  React$4.useEffect(function () {
-    var customizeContainer = getPortalContainer(getContainer);
-
-    // Tell component that we check this in effect which is safe to be `null`
-    setInnerContainer(customizeContainer !== null && customizeContainer !== void 0 ? customizeContainer : null);
-  });
-  var _useDom = useDom(mergedRender && !innerContainer, debug),
-    _useDom2 = _slicedToArray(_useDom, 2),
-    defaultContainer = _useDom2[0],
-    queueCreate = _useDom2[1];
-  var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer;
-
-  // ========================= Locker ==========================
-  useScrollLocker(autoLock && open && canUseDom$1() && (mergedContainer === defaultContainer || mergedContainer === document.body));
-
-  // =========================== Ref ===========================
-  var childRef = null;
-  if (children && supportRef(children) && ref) {
-    var _ref = children;
-    childRef = _ref.ref;
-  }
-  var mergedRef = useComposeRef(childRef, ref);
-
-  // ========================= Render ==========================
-  // Do not render when nothing need render
-  // When innerContainer is `undefined`, it may not ready since user use ref in the same render
-  if (!mergedRender || !canUseDom$1() || innerContainer === undefined) {
-    return null;
-  }
-
-  // Render inline
-  var renderInline = mergedContainer === false || inlineMock();
-  var reffedChildren = children;
-  if (ref) {
-    reffedChildren = /*#__PURE__*/React$4.cloneElement(children, {
-      ref: mergedRef
-    });
-  }
-  return /*#__PURE__*/React$4.createElement(OrderContext.Provider, {
-    value: queueCreate
-  }, renderInline ? reffedChildren : /*#__PURE__*/createPortal(reffedChildren, mergedContainer));
-});
-if (process.env.NODE_ENV !== 'production') {
-  Portal.displayName = 'Portal';
-}
-
 function getRoot(ele) {
   var _ele$getRootNode;
   return ele === null || ele === void 0 || (_ele$getRootNode = ele.getRootNode) === null || _ele$getRootNode === void 0 ? void 0 : _ele$getRootNode.call(ele);
@@ -4332,7 +2639,7 @@ function Arrow(props) {
   }
   return /*#__PURE__*/React$4.createElement("div", {
     ref: arrowRef,
-    className: classNames("".concat(prefixCls, "-arrow"), className),
+    className: clsx("".concat(prefixCls, "-arrow"), className),
     style: alignStyle
   }, content);
 }
@@ -4356,7 +2663,7 @@ function Mask(props) {
       style: {
         zIndex: zIndex
       },
-      className: classNames("".concat(prefixCls, "-mask"), className)
+      className: clsx("".concat(prefixCls, "-mask"), className)
     });
   });
 }
@@ -4514,7 +2821,7 @@ var Popup = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
     }), function (_ref, motionRef) {
       var motionClassName = _ref.className,
         motionStyle = _ref.style;
-      var cls = classNames(prefixCls, motionClassName, className);
+      var cls = clsx(prefixCls, motionClassName, className);
       return /*#__PURE__*/React$4.createElement("div", {
         ref: composeRef(resizeObserverRef, ref, motionRef),
         className: cls,
@@ -5641,7 +3948,7 @@ function generateTrigger() {
     }, [JSON.stringify(popupAlign)]);
     var alignedClassName = React$4.useMemo(function () {
       var baseClassName = getAlignPopupClassName(builtinPlacements, prefixCls, alignInfo, alignPoint);
-      return classNames(baseClassName, getPopupClassNameFromAlign === null || getPopupClassNameFromAlign === void 0 ? void 0 : getPopupClassNameFromAlign(alignInfo));
+      return clsx(baseClassName, getPopupClassNameFromAlign === null || getPopupClassNameFromAlign === void 0 ? void 0 : getPopupClassNameFromAlign(alignInfo));
     }, [alignInfo, getPopupClassNameFromAlign, builtinPlacements, prefixCls, alignPoint]);
 
     // ============================ Refs ============================
@@ -5804,7 +4111,7 @@ function generateTrigger() {
 
     // ========================= ClassName ==========================
     if (className) {
-      cloneProps.className = classNames(originChildProps.className, className);
+      cloneProps.className = clsx(originChildProps.className, className);
     }
 
     // =========================== Render ===========================
@@ -5848,7 +4155,7 @@ function generateTrigger() {
       ref: setPopupRef,
       prefixCls: prefixCls,
       popup: popup,
-      className: classNames(popupClassName, alignedClassName),
+      className: clsx(popupClassName, alignedClassName),
       style: popupStyle,
       target: targetEle,
       onMouseEnter: onPopupMouseEnter,
@@ -6023,7 +4330,7 @@ var SelectTrigger = function SelectTrigger(props, ref) {
     popupAlign: dropdownAlign,
     popupVisible: visible,
     getPopupContainer: getPopupContainer,
-    popupClassName: classNames(dropdownClassName, _defineProperty({}, "".concat(dropdownPrefixCls, "-empty"), empty)),
+    popupClassName: clsx(dropdownClassName, _defineProperty({}, "".concat(dropdownPrefixCls, "-empty"), empty)),
     popupStyle: popupStyle,
     getTriggerDOMNode: getTriggerDOMNode,
     onPopupVisibleChange: onPopupVisibleChange
@@ -6581,7 +4888,7 @@ var BaseSelect = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
   var arrowNode;
   if (showSuffixIcon) {
     arrowNode = /*#__PURE__*/React$4.createElement(TransBtn, {
-      className: classNames("".concat(prefixCls, "-arrow"), _defineProperty({}, "".concat(prefixCls, "-arrow-loading"), loading)),
+      className: clsx("".concat(prefixCls, "-arrow"), _defineProperty({}, "".concat(prefixCls, "-arrow-loading"), loading)),
       customizeIcon: suffixIcon,
       customizeIconProps: {
         loading: loading,
@@ -6614,7 +4921,7 @@ var BaseSelect = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
   });
 
   // ============================= Select =============================
-  var mergedClassName = classNames(prefixCls, className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-focused"), mockFocused), _defineProperty(_classNames2, "".concat(prefixCls, "-multiple"), multiple), _defineProperty(_classNames2, "".concat(prefixCls, "-single"), !multiple), _defineProperty(_classNames2, "".concat(prefixCls, "-allow-clear"), allowClear), _defineProperty(_classNames2, "".concat(prefixCls, "-show-arrow"), showSuffixIcon), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-loading"), loading), _defineProperty(_classNames2, "".concat(prefixCls, "-open"), mergedOpen), _defineProperty(_classNames2, "".concat(prefixCls, "-customize-input"), customizeInputElement), _defineProperty(_classNames2, "".concat(prefixCls, "-show-search"), mergedShowSearch), _classNames2));
+  var mergedClassName = clsx(prefixCls, className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-focused"), mockFocused), _defineProperty(_classNames2, "".concat(prefixCls, "-multiple"), multiple), _defineProperty(_classNames2, "".concat(prefixCls, "-single"), !multiple), _defineProperty(_classNames2, "".concat(prefixCls, "-allow-clear"), allowClear), _defineProperty(_classNames2, "".concat(prefixCls, "-show-arrow"), showSuffixIcon), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-loading"), loading), _defineProperty(_classNames2, "".concat(prefixCls, "-open"), mergedOpen), _defineProperty(_classNames2, "".concat(prefixCls, "-customize-input"), customizeInputElement), _defineProperty(_classNames2, "".concat(prefixCls, "-show-search"), mergedShowSearch), _classNames2));
 
   // >>> Selector
   var selectorNode = /*#__PURE__*/React$4.createElement(RefSelectTrigger, {
@@ -6998,271 +5305,288 @@ var Filler = /*#__PURE__*/React$4.forwardRef(function (_ref, ref) {
     }
   }, /*#__PURE__*/React$4.createElement("div", _extends({
     style: innerStyle,
-    className: classNames(_defineProperty({}, "".concat(prefixCls, "-holder-inner"), prefixCls)),
+    className: clsx(_defineProperty({}, "".concat(prefixCls, "-holder-inner"), prefixCls)),
     ref: ref
   }, innerProps), children, extra)));
 });
 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 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();
+    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]);
+    }
+    setPrevData(data);
+  }, [data]);
+  return [diffItem];
+}
 
-  // ======================= 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);
-  };
+var isFF = (typeof navigator === "undefined" ? "undefined" : _typeof$1(navigator)) === 'object' && /Firefox/i.test(navigator.userAgent);
 
-  // ======================== Range =========================
-  var enableScrollRange = scrollRange - containerSize || 0;
-  var enableOffsetRange = containerSize - spinSize || 0;
+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);
+  }
 
-  // ========================= Top ==========================
-  var top = React$4.useMemo(function () {
-    if (scrollOffset === 0 || enableScrollRange === 0) {
-      return 0;
+  // Pass to ref since global add is in closure
+  var scrollPingRef = useRef({
+    top: isScrollAtTop,
+    bottom: isScrollAtBottom
+  });
+  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();
     }
-    var ptg = scrollOffset / enableScrollRange;
-    return ptg * enableOffsetRange;
-  }, [scrollOffset, enableScrollRange, enableOffsetRange]);
-
-  // ====================== Container =======================
-  var onContainerMouseDown = function onContainerMouseDown(e) {
-    e.stopPropagation();
-    e.preventDefault();
+    return !lockRef.current && originScroll;
   };
+});
 
-  // ======================== Thumb =========================
-  var stateRef = React$4.useRef({
-    top: top,
-    dragging: dragging,
-    pageY: pageXY,
-    startTop: startTop
-  });
-  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);
 
-  // ======================== Effect ========================
+  // Firefox patch
+  var wheelValueRef = useRef(null);
+  var isMouseScrollRef = useRef(false);
 
-  // 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);
-    };
-  }, []);
+  // Scroll status sync
+  var originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
+  function onWheelY(event, deltaY) {
+    wrapperRaf.cancel(nextFrameRef.current);
+    offsetRef.current += deltaY;
+    wheelValueRef.current = deltaY;
 
-  // 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);
-      };
-    }
-  }, [dragging]);
-  React$4.useEffect(function () {
-    delayHidden();
-  }, [scrollOffset]);
+    // Do nothing when scroll at the edge, Skip check when is in scroll
+    if (originScroll(deltaY)) return;
 
-  // ====================== Imperative ======================
-  React$4.useImperativeHandle(ref, function () {
-    return {
-      delayHidden: delayHidden
-    };
-  });
+    // 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();
+    }
+  }
 
-  // ======================== Render ========================
-  var scrollbarPrefixCls = "".concat(prefixCls, "-scrollbar");
-  var containerStyle = {
-    position: 'absolute',
-    visibility: visible ? null : 'hidden'
-  };
-  var thumbStyle = {
-    position: 'absolute',
-    background: 'rgba(0, 0, 0, 0.5)',
-    borderRadius: 99,
-    cursor: 'pointer',
-    userSelect: 'none'
-  };
-  if (horizontal) {
-    // Container
-    containerStyle.height = 8;
-    containerStyle.left = 0;
-    containerStyle.right = 0;
-    containerStyle.bottom = 0;
+  // 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;
 
-    // Thumb
-    thumbStyle.height = '100%';
-    thumbStyle.width = spinSize;
-    if (isLTR) {
-      thumbStyle.left = top;
-    } else {
-      thumbStyle.right = top;
+    // 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';
     }
-  } else {
-    // Container
-    containerStyle.width = 8;
-    containerStyle.top = 0;
-    containerStyle.bottom = 0;
-    if (isLTR) {
-      containerStyle.right = 0;
+    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;
+  // A patch for firefox
+  function onFireFoxScroll(event) {
+    if (!inVirtual) return;
+    isMouseScrollRef.current = event.detail === wheelValueRef.current;
   }
-  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';
+  return [onWheel, onFireFoxScroll];
 }
 
-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
-  });
-}
+/**
+ * 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);
 
-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);
+    // 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.
@@ -7351,6 +5675,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();
@@ -7452,304 +5839,270 @@ 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
-    if (arg === null || arg === undefined) {
-      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);
+
+  // =========================== Scroll To ===========================
+  return function (arg) {
+    // When not argument provided, we think dev may want to show the scrollbar
+    if (arg === null || arg === undefined) {
+      triggerFlash();
+      return;
     }
-    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;
+    // 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
+      });
     }
-  }
-  return diffIndex === null ? null : {
-    index: diffIndex,
-    multiple: multiple
   };
 }
 
-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 || onDiff(diff.index);
-      setDiffItem(data[diff.index]);
-    }
-    setPrevData(data);
-  }, [data]);
-  return [diffItem];
-}
-
-var isFF = (typeof navigator === "undefined" ? "undefined" : _typeof$1(navigator)) === 'object' && /Firefox/i.test(navigator.userAgent);
+    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;
 
-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);
-  }
+  // ========================= Refs =========================
+  var scrollbarRef = React$4.useRef();
+  var thumbRef = React$4.useRef();
 
-  // Pass to ref since global add is in closure
-  var scrollPingRef = useRef({
-    top: isScrollAtTop,
-    bottom: isScrollAtBottom
-  });
-  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;
+  // ======================= 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);
   };
-});
-
-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;
+  // ======================== Range =========================
+  var enableScrollRange = scrollRange - containerSize || 0;
+  var enableOffsetRange = containerSize - spinSize || 0;
 
-    // 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);
+  // ========================= Top ==========================
+  var top = React$4.useMemo(function () {
+    if (scrollOffset === 0 || enableScrollRange === 0) {
+      return 0;
     }
-  }
+    var ptg = scrollOffset / enableScrollRange;
+    return ptg * enableOffsetRange;
+  }, [scrollOffset, enableScrollRange, enableOffsetRange]);
 
-  // A patch for firefox
-  function onFireFoxScroll(event) {
-    if (!inVirtual) return;
-    isMouseScrollRef.current = event.detail === wheelValueRef.current;
-  }
-  return [onWheel, onFireFoxScroll];
-}
+  // ====================== Container =======================
+  var onContainerMouseDown = function onContainerMouseDown(e) {
+    e.stopPropagation();
+    e.preventDefault();
+  };
 
-var SMOOTH_PTG = 14 / 15;
-function useMobileTouchMove(inVirtual, listRef, callback) {
-  var touchedRef = useRef(false);
-  var touchYRef = useRef(0);
-  var elementRef = useRef(null);
+  // ======================== Thumb =========================
+  var stateRef = React$4.useRef({
+    top: top,
+    dragging: dragging,
+    pageY: pageXY,
+    startTop: startTop
+  });
+  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();
+  };
 
-  // Smooth scroll
-  var intervalRef = useRef(null);
+  // ======================== Effect ========================
 
-  /* 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();
-      }
+  // 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);
+    };
+  }, []);
 
-      // Smooth interval
-      clearInterval(intervalRef.current);
-      intervalRef.current = setInterval(function () {
-        _offsetY *= SMOOTH_PTG;
-        if (!callback(_offsetY, true) || Math.abs(_offsetY) <= 0.1) {
-          clearInterval(intervalRef.current);
+  // 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 || _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: clsx(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: clsx("".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;
@@ -7764,52 +6117,6 @@ function getSpinSize() {
   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 = {
@@ -7841,11 +6148,32 @@ function RawList(props, ref) {
     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 mergedClassName = clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-rtl"), isRTL), className);
   var mergedData = data || EMPTY_DATA;
   var componentRef = useRef();
   var fillerInnerRef = useRef();
@@ -7870,14 +6198,6 @@ 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
   };
@@ -7909,14 +6229,6 @@ function RawList(props, ref) {
     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) {
@@ -8037,9 +6349,9 @@ 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) {
@@ -8073,7 +6385,7 @@ function RawList(props, ref) {
   }
   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;
@@ -8135,8 +6447,10 @@ function RawList(props, ref) {
   // 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]);
@@ -8313,7 +6627,7 @@ var OptionList = function OptionList(_, ref) {
     listHeight = _React$useContext.listHeight,
     listItemHeight = _React$useContext.listItemHeight;
   var itemPrefixCls = "".concat(prefixCls, "-item");
-  var memoFlattenOptions = useMemo(function () {
+  var memoFlattenOptions = useMemo$1(function () {
     return flattenOptions;
   }, [open, flattenOptions], function (prev, next) {
     return next[0] && prev[1] !== next[1];
@@ -8564,7 +6878,7 @@ var OptionList = function OptionList(_, ref) {
       var _data$title;
       var groupTitle = (_data$title = data.title) !== null && _data$title !== void 0 ? _data$title : isTitleType(label) ? label.toString() : undefined;
       return /*#__PURE__*/React$4.createElement("div", {
-        className: classNames(itemPrefixCls, "".concat(itemPrefixCls, "-group")),
+        className: clsx(itemPrefixCls, "".concat(itemPrefixCls, "-group")),
         title: groupTitle
       }, label !== undefined ? label : key);
     }
@@ -8579,7 +6893,7 @@ var OptionList = function OptionList(_, ref) {
     // Option
     var selected = isSelected(value);
     var optionPrefixCls = "".concat(itemPrefixCls, "-option");
-    var optionClassName = classNames(itemPrefixCls, optionPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(optionPrefixCls, "-grouped"), groupOption), _defineProperty(_classNames, "".concat(optionPrefixCls, "-active"), activeIndex === itemIndex && !disabled), _defineProperty(_classNames, "".concat(optionPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(optionPrefixCls, "-selected"), selected), _classNames));
+    var optionClassName = clsx(itemPrefixCls, optionPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(optionPrefixCls, "-grouped"), groupOption), _defineProperty(_classNames, "".concat(optionPrefixCls, "-active"), activeIndex === itemIndex && !disabled), _defineProperty(_classNames, "".concat(optionPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(optionPrefixCls, "-selected"), selected), _classNames));
     var mergedLabel = getLabel(item);
     var iconVisible = !menuItemSelectedIcon || typeof menuItemSelectedIcon === 'function' || selected;
 
@@ -10074,7 +8388,7 @@ function Column(_ref) {
           };
           // >>>>> Render
           return jsxs("li", Object.assign({
-            className: classNames(menuItemPrefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(menuItemPrefixCls, "-expand"), !isMergedLeaf), "".concat(menuItemPrefixCls, "-active"), activeValue === value || activeValue === fullPathKey), "".concat(menuItemPrefixCls, "-disabled"), disabled), "".concat(menuItemPrefixCls, "-loading"), isLoading)),
+            className: clsx(menuItemPrefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(menuItemPrefixCls, "-expand"), !isMergedLeaf), "".concat(menuItemPrefixCls, "-active"), activeValue === value || activeValue === fullPathKey), "".concat(menuItemPrefixCls, "-disabled"), disabled), "".concat(menuItemPrefixCls, "-loading"), isLoading)),
             style: dropdownMenuColumnStyle,
             role: "menuitemcheckbox",
             "aria-checked": checked,
@@ -10340,7 +8654,7 @@ var RefOptionList = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
     open: open
   }, {
     children: jsx("div", Object.assign({
-      className: classNames("".concat(mergedPrefixCls, "-menus"), _defineProperty(_defineProperty({}, "".concat(mergedPrefixCls, "-menu-empty"), isEmpty), "".concat(mergedPrefixCls, "-rtl"), rtl)),
+      className: clsx("".concat(mergedPrefixCls, "-menus"), _defineProperty(_defineProperty({}, "".concat(mergedPrefixCls, "-menu-empty"), isEmpty), "".concat(mergedPrefixCls, "-rtl"), rtl)),
       ref: containerRef
     }, {
       children: columnNodes
@@ -10629,11 +8943,11 @@ const Cascader = /*#__PURE__*/React$4.forwardRef((props, ref) => {
     }
   };
   const childrenMemo = React$4.useMemo(() => {
-    const contentClass = clsx("".concat($prefixCls, "-cascader-select-content"), {
+    const contentClass = clsx$1("".concat($prefixCls, "-cascader-select-content"), {
       ["".concat($prefixCls, "-cascader-select-value")]: inputLabel,
       ["".concat($prefixCls, "-cascader-select-disabled")]: disabled
     });
-    const svgClass = clsx("select-svg", {
+    const svgClass = clsx$1("select-svg", {
       ["select-svg-open"]: dropdownVisible
     });
     return children ? children : jsxs("div", Object.assign({