@nutui/nutui-react 3.0.3-beta.0 → 3.0.3

package/dist/nutui.react.umd.js

@@ -10895,22 +10895,6 @@ Please add \`${key2}Action\` when creating your handler.`);
     var e2 = new Error(message);
     return e2.name = "SuppressedError", e2.error = error, e2.suppressed = suppressed, e2;
   };
-  function _class_call_check(instance, Constructor) {
-    if (!(instance instanceof Constructor)) throw new TypeError("Cannot call a class as a function");
-  }
-  function _defineProperties(target, props) {
-    for (var i2 = 0; i2 < props.length; i2++) {
-      var descriptor = props[i2];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-  function _create_class(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    return Constructor;
-  }
   function _to_primitive(input, hint) {
     if (_type_of(input) !== "object" || input === null) return input;
     var prim = input[Symbol.toPrimitive];
@@ -10925,167 +10909,93 @@ Please add \`${key2}Action\` when creating your handler.`);
     var key2 = _to_primitive(arg, "string");
     return _type_of(key2) === "symbol" ? key2 : String(key2);
   }
-  var formatTree = function(tree, parent2, config2) {
-    return tree.map(function(node) {
-      var tmp = config2.value, valueKey = tmp === void 0 ? "value" : tmp, tmp1 = config2.text, textKey = tmp1 === void 0 ? "text" : tmp1, tmp2 = config2.children, childrenKey = tmp2 === void 0 ? "children" : tmp2;
-      var value2 = node[valueKey], text2 = node[textKey], children = node[childrenKey], others = _object_without_properties(node, [
-        valueKey,
-        textKey,
-        childrenKey
+  var normalizeOptions = function(options2, keyMap) {
+    if (!options2) return void 0;
+    return options2.map(function(opt) {
+      var _keyMap_textKey = keyMap.textKey, _keyMap_valueKey = keyMap.valueKey, _keyMap_childrenKey = keyMap.childrenKey, text2 = opt[_keyMap_textKey], value2 = opt[_keyMap_valueKey], children = opt[_keyMap_childrenKey], others = _object_without_properties(opt, [
+        _keyMap_textKey,
+        _keyMap_valueKey,
+        _keyMap_childrenKey
       ].map(_to_property_key));
-      var newNode = _object_spread_props(_object_spread({
-        loading: false
-      }, others), {
-        level: parent2 ? (parent2 && parent2.level || 0) + 1 : 0,
-        value: value2,
+      return _object_spread({
         text: text2,
-        children,
-        _parent: parent2
-      });
-      if (newNode.children && newNode.children.length) {
-        newNode.children = formatTree(newNode.children, newNode, config2);
-      }
-      return newNode;
+        value: value2,
+        children: normalizeOptions(children, keyMap)
+      }, others);
     });
   };
-  var eachTree = function(tree, cb) {
-    var i2 = 0;
-    var node;
-    while (node = tree[i2++]) {
-      if (cb(node) === true) {
-        break;
-      }
-      if (node.children && node.children.length) {
-        eachTree(node.children, cb);
-      }
-    }
-  };
-  var defaultConvertConfig = {
-    topId: null,
-    idKey: "id",
-    pidKey: "pid",
-    sortKey: ""
-  };
-  var convertListToOptions = function(list, options2) {
-    var mergedOptions = _object_spread({}, defaultConvertConfig, options2 || {});
-    var topId = mergedOptions.topId, idKey = mergedOptions.idKey, pidKey = mergedOptions.pidKey, sortKey = mergedOptions.sortKey;
-    var result = [];
+  var normalizeListOptions = function(options2, format2) {
+    var defaultConvertConfig = {
+      topId: null,
+      idKey: "id",
+      pidKey: "pid",
+      sortKey: "sortKey"
+    };
+    var mergedFormat = _object_spread({}, defaultConvertConfig, format2);
+    var topId = mergedFormat.topId, idKey = mergedFormat.idKey, pidKey = mergedFormat.pidKey, sortKey = mergedFormat.sortKey;
     var map = {};
-    list.forEach(function(node) {
-      node = _object_spread({}, node);
-      var id = node[idKey], pid = node[pidKey];
-      var children = map[pid] = map[pid] || [];
-      if (!result.length && pid === topId) {
-        result = children;
-      }
-      children.push(node);
-      node.children = map[id] || (map[id] = []);
+    options2.forEach(function(opt) {
+      var pid = opt[pidKey], id = opt[idKey], others = _object_without_properties(opt, [
+        pidKey,
+        idKey
+      ].map(_to_property_key));
+      var newNode = _object_spread({
+        pid,
+        id
+      }, others);
+      if (map[pid]) {
+        map[pid].push(newNode);
+      } else {
+        map[pid] = [
+          newNode
+        ];
+      }
     });
-    if (sortKey) {
-      Object.keys(map).forEach(function(i2) {
-        if (map[i2].length > 1) {
-          map[i2].sort(function(a, b) {
-            return a[sortKey] - b[sortKey];
-          });
+    for (var key2 in map) {
+      if (!Object.prototype.hasOwnProperty.call(map, key2)) continue;
+      map[key2].sort(function(a, b) {
+        return a[sortKey] - b[sortKey];
+      });
+      map[key2].forEach(function(option) {
+        if (map[option.id]) {
+          option.children = map[option.id];
         }
       });
     }
-    map = null;
-    return result;
+    return map[topId];
+  };
+  var isEmpty = function(p2) {
+    if (p2 === null || p2 === void 0) return true;
+    if ((typeof p2 === "undefined" ? "undefined" : _type_of(p2)) === "object" && Object.keys(p2).length === 0) return true;
+    if (Array.isArray(p2) && p2.length === 0) return true;
+    return false;
+  };
+  var getRefValue = function(ref) {
+    return ref.current;
+  };
+  var useRefState = function(param) {
+    var ref = React.useRef(param);
+    var _useState = _sliced_to_array(React.useState(param), 2), setState = _useState[1];
+    var updateState = function(p2) {
+      ref.current = p2;
+      setState(p2);
+    };
+    return [
+      ref,
+      updateState
+    ];
   };
-  var Tree = /* @__PURE__ */ function() {
-    function Tree2(nodes, config2) {
-      var _this = this;
-      _class_call_check(this, Tree2);
-      _define_property(this, "nodes", void 0);
-      _define_property(this, "config", void 0);
-      _define_property(this, "isLeaf", function(node, lazy) {
-        var leaf = node.leaf, children = node.children;
-        var hasChildren = Array.isArray(children) && Boolean(children.length);
-        return leaf || !hasChildren && !lazy;
-      });
-      _define_property(this, "hasChildren", function(node, lazy) {
-        var isLeaf = _this.isLeaf(node, lazy);
-        if (isLeaf) {
-          return false;
-        }
-        var children = node.children;
-        return Array.isArray(children) && Boolean(children.length);
-      });
-      this.config = _object_spread({
-        value: "value",
-        text: "text",
-        children: "children"
-      }, config2 || {});
-      this.nodes = formatTree(nodes, null, this.config);
-    }
-    _create_class(Tree2, [
-      {
-        key: "updateChildren",
-        value: function updateChildren(nodes, parent2) {
-          if (!parent2) {
-            this.nodes = formatTree(nodes, null, this.config);
-          } else {
-            parent2.children = formatTree(nodes, parent2, this.config);
-          }
-        }
-      },
-      {
-        // for test
-        key: "getNodeByValue",
-        value: function getNodeByValue(value2) {
-          var foundNode;
-          eachTree(this.nodes, function(node) {
-            if (node.value === value2) {
-              foundNode = node;
-              return true;
-            }
-            return null;
-          });
-          return foundNode;
-        }
-      },
-      {
-        key: "getPathNodesByValue",
-        value: function getPathNodesByValue(value2) {
-          if (!value2.length) {
-            return [];
-          }
-          var pathNodes = [];
-          var currentNodes = this.nodes;
-          while (currentNodes && currentNodes.length) {
-            var foundNode = currentNodes.find(function(node) {
-              return node.value === value2[node.level];
-            });
-            if (!foundNode) {
-              break;
-            }
-            pathNodes.push(foundNode);
-            currentNodes = foundNode.children;
-          }
-          return pathNodes;
-        }
-      }
-    ]);
-    return Tree2;
-  }();
   var defaultProps$1b = _object_spread_props(_object_spread({}, ComponentDefaults), {
     activeColor: "",
     activeIcon: "checklist",
     popup: true,
     options: [],
-    optionKey: {
-      textKey: "text",
-      valueKey: "value",
-      childrenKey: "children"
-    },
+    optionKey: {},
     format: {},
     closeable: false,
     closeIconPosition: "top-right",
     closeIcon: "close",
     lazy: false,
-    onLoad: function() {
-    },
     onClose: function() {
     },
     onChange: function() {
@@ -11093,462 +11003,365 @@ Please add \`${key2}Action\` when creating your handler.`);
     onPathChange: function() {
     }
   });
-  var InternalCascader = function(props, ref) {
+  var Cascader = /* @__PURE__ */ React.forwardRef(function(props, ref) {
+    var classPrefix2 = "nut-cascader";
+    var classPane = "".concat(classPrefix2, "-pane");
+    var _mergeProps = mergeProps(defaultProps$1b, props), activeColor = _mergeProps.activeColor, activeIcon = _mergeProps.activeIcon, popup = _mergeProps.popup, _mergeProps_popupProps = _mergeProps.popupProps, popupProps = _mergeProps_popupProps === void 0 ? {} : _mergeProps_popupProps, outerVisible = _mergeProps.visible, outerOptions = _mergeProps.options, outerValue = _mergeProps.value, outerDefaultValue = _mergeProps.defaultValue, optionKey = _mergeProps.optionKey, format2 = _mergeProps.format, closeable = _mergeProps.closeable, closeIconPosition = _mergeProps.closeIconPosition, closeIcon = _mergeProps.closeIcon, lazy = _mergeProps.lazy, onLoad = _mergeProps.onLoad;
     var locale = useConfig().locale;
-    var _$_object_spread = _object_spread({}, defaultProps$1b, props), className = _$_object_spread.className, style = _$_object_spread.style, activeColor = _$_object_spread.activeColor, activeIcon = _$_object_spread.activeIcon, popup = _$_object_spread.popup, _object_spread_popupProps = _$_object_spread.popupProps, popupProps = _object_spread_popupProps === void 0 ? {} : _object_spread_popupProps, visible = _$_object_spread.visible, options2 = _$_object_spread.options, value2 = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, optionKey = _$_object_spread.optionKey, format2 = _$_object_spread.format, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, lazy = _$_object_spread.lazy, title = _$_object_spread.title, left = _$_object_spread.left, onLoad = _$_object_spread.onLoad, onClose = _$_object_spread.onClose, onChange = _$_object_spread.onChange, onPathChange = _$_object_spread.onPathChange;
-    var _useState = _sliced_to_array(React.useState("c1"), 2), tabvalue = _useState[0], setTabvalue = _useState[1];
-    var _useState1 = _sliced_to_array(React.useState([]), 2), optionsData = _useState1[0], setOptionsData = _useState1[1];
-    var isLazy = function() {
-      return state.configs.lazy && Boolean(state.configs.onLoad);
-    };
+    var _useState = _sliced_to_array(React.useState(0), 2), tabActiveIndex = _useState[0], setTabActiveIndex = _useState[1];
+    var _useRefState = _sliced_to_array(useRefState(outerOptions), 2), optionsRef = _useRefState[0], setInnerOptions = _useRefState[1];
+    var innerOptions = getRefValue(optionsRef);
+    var _useState1 = _sliced_to_array(React.useState({}), 2), loading = _useState1[0], setLoading = _useState1[1];
     var _usePropsValue = _sliced_to_array(usePropsValue({
-      value: value2,
-      defaultValue,
-      finalValue: defaultValue
-    }), 2), innerValue = _usePropsValue[0], setInnerValue = _usePropsValue[1];
+      value: outerValue,
+      defaultValue: outerDefaultValue,
+      finalValue: [],
+      onChange: function(value3) {
+        var _props_onChange, _props_onPathChange;
+        (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, value3, pathNodes.current);
+        (_props_onPathChange = props.onPathChange) === null || _props_onPathChange === void 0 ? void 0 : _props_onPathChange.call(props, value3, pathNodes.current);
+      }
+    }), 2), value2 = _usePropsValue[0], setValue = _usePropsValue[1];
+    var _useState2 = _sliced_to_array(React.useState(value2), 2), innerValue = _useState2[0], setInnerValue = _useState2[1];
+    var options2 = React.useMemo(function() {
+      if (!isEmpty(format2)) {
+        return normalizeListOptions(innerOptions, format2);
+      }
+      if (!isEmpty(optionKey)) {
+        return normalizeOptions(innerOptions, optionKey);
+      }
+      return innerOptions;
+    }, [
+      innerOptions,
+      optionKey,
+      format2,
+      innerValue
+    ]);
+    var pathNodes = React.useRef([]);
+    var levels = React.useMemo(function() {
+      var next = [];
+      var end = false;
+      var currentOptions = options2;
+      var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+      try {
+        var _loop = function() {
+          var _step_value = _sliced_to_array(_step.value, 2), index2 = _step_value[0], val2 = _step_value[1];
+          var opt = currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.find(function(o) {
+            return o.value === val2;
+          });
+          next.push({
+            selected: val2,
+            pane: currentOptions
+          });
+          pathNodes.current[index2] = opt;
+          if (opt === null || opt === void 0 ? void 0 : opt.children) {
+            currentOptions = opt.children;
+          } else {
+            end = true;
+            return "break";
+          }
+        };
+        for (var _iterator = innerValue.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var _ret = _loop();
+          if (_ret === "break") break;
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+      if (!end) {
+        next.push({
+          selected: null,
+          pane: currentOptions
+        });
+      }
+      return next;
+    }, [
+      innerValue,
+      options2,
+      innerOptions
+    ]);
     var _usePropsValue1 = _sliced_to_array(usePropsValue({
-      value: visible,
+      value: outerVisible,
       defaultValue: void 0,
-      finalValue: false
-    }), 2), innerVisible = _usePropsValue1[0], setInnerVisible = _usePropsValue1[1];
+      onChange: function(value3) {
+        if (value3 === false) {
+          var _props_onClose;
+          (_props_onClose = props.onClose) === null || _props_onClose === void 0 ? void 0 : _props_onClose.call(props);
+        }
+      }
+    }), 2), visible = _usePropsValue1[0], setVisible = _usePropsValue1[1];
     var actions = {
       open: function() {
-        setInnerVisible(true);
+        setVisible(true);
       },
       close: function() {
-        setInnerVisible(false);
+        setVisible(false);
       }
     };
     React.useImperativeHandle(ref, function() {
       return actions;
     });
-    var _useState2 = _sliced_to_array(React.useState({
-      optionsData: [],
-      panes: [
-        {
-          nodes: [],
-          selectedNode: [],
-          paneKey: ""
-        }
-      ],
-      tree: new Tree([], {}),
-      tabsCursor: 0,
-      initLoading: false,
-      currentProcessNode: [],
-      configs: {
-        lazy,
-        onLoad,
-        optionKey,
-        format: format2
-      },
-      lazyLoadMap: /* @__PURE__ */ new Map()
-    }), 1), state = _useState2[0];
-    var classPrefix2 = classNames("nut-cascader");
-    var classesPane = classNames(_define_property({}, "".concat(classPrefix2, "-pane"), true));
     React.useEffect(function() {
-      initData();
+      if (!visible) {
+        setInnerValue(value2);
+      }
     }, [
-      options2,
-      format2
+      visible,
+      value2
     ]);
     React.useEffect(function() {
-      syncValue();
+      setInnerOptions(outerOptions);
     }, [
-      value2
+      outerOptions
     ]);
-    var initData = /* @__PURE__ */ function() {
-      var _ref = _async_to_generator(function() {
-        return __generator(this, function(_state) {
-          switch (_state.label) {
-            case 0:
-              state.lazyLoadMap.clear();
-              if (format2 && Object.keys(format2).length > 0) {
-                state.optionsData = convertListToOptions(options2, format2);
-              } else {
-                state.optionsData = options2;
-              }
-              state.tree = new Tree(state.optionsData, {
-                value: state.configs.optionKey.valueKey,
-                text: state.configs.optionKey.textKey,
-                children: state.configs.optionKey.childrenKey
-              });
-              if (!(isLazy() && !state.tree.nodes.length)) return [
-                3,
-                2
-              ];
-              return [
-                4,
-                invokeLazyLoad({
-                  root: true,
-                  loading: true,
-                  text: "",
-                  value: ""
-                })
-              ];
-            case 1:
-              _state.sent();
-              _state.label = 2;
-            case 2:
-              state.panes = [
-                {
-                  nodes: state.tree.nodes,
-                  selectedNode: null,
-                  paneKey: "c1"
-                }
-              ];
-              syncValue();
-              setOptionsData(state.panes);
-              return [
-                2
-              ];
-          }
-        });
-      });
-      return function initData2() {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    var syncValue = /* @__PURE__ */ function() {
-      var _ref = _async_to_generator(function() {
-        var currentValue, needToSync, parent2, last, pathNodes;
-        return __generator(this, function(_state) {
-          switch (_state.label) {
-            case 0:
-              currentValue = innerValue;
-              if (currentValue === void 0 || ![
-                defaultValue,
-                value2
-              ].includes(currentValue) || !state.tree.nodes.length) {
-                return [
-                  2
-                ];
-              }
-              if (currentValue.length === 0) {
-                state.tabsCursor = 0;
+    React.useEffect(function() {
+      setTabActiveIndex(levels.length - 1);
+    }, [
+      innerValue,
+      innerOptions,
+      outerOptions
+    ]);
+    React.useEffect(function() {
+      var max = levels.length - 1;
+      if (tabActiveIndex > max) {
+        setTabActiveIndex(max);
+      }
+    }, [
+      tabActiveIndex,
+      levels,
+      innerOptions,
+      outerOptions
+    ]);
+    React.useEffect(function() {
+      var load = /* @__PURE__ */ function() {
+        var _ref = _async_to_generator(function() {
+          var parent2, error;
+          return __generator(this, function(_state) {
+            switch (_state.label) {
+              case 0:
+                parent2 = {
+                  children: []
+                };
+                _state.label = 1;
+              case 1:
+                _state.trys.push([
+                  1,
+                  3,
+                  ,
+                  4
+                ]);
                 return [
-                  2
-                ];
-              }
-              needToSync = currentValue;
-              if (!(isLazy() && Array.isArray(currentValue) && currentValue.length)) return [
-                3,
-                3
-              ];
-              needToSync = [];
-              parent2 = state.tree.nodes.find(function(node) {
-                return node.value === currentValue[0];
-              });
-              if (!parent2) return [
-                3,
-                3
-              ];
-              needToSync = [
-                parent2.value
-              ];
-              state.initLoading = true;
-              return [
-                4,
-                currentValue.slice(1).reduce(/* @__PURE__ */ function() {
-                  var _ref2 = _async_to_generator(function(p2, value3) {
-                    var _parent_children, parent3, node;
-                    return __generator(this, function(_state2) {
-                      switch (_state2.label) {
-                        case 0:
-                          return [
-                            4,
-                            p2
-                          ];
-                        case 1:
-                          parent3 = _state2.sent();
-                          return [
-                            4,
-                            invokeLazyLoad(parent3)
-                          ];
-                        case 2:
-                          _state2.sent();
-                          node = parent3 === null || parent3 === void 0 ? void 0 : (_parent_children = parent3.children) === null || _parent_children === void 0 ? void 0 : _parent_children.find(function(item) {
-                            return item.value === value3;
-                          });
-                          if (node) {
-                            needToSync.push(value3);
-                          }
-                          return [
-                            2,
-                            Promise.resolve(node)
-                          ];
-                      }
+                  4,
+                  innerValue.reduce(/* @__PURE__ */ function() {
+                    var _ref2 = _async_to_generator(function(promise, val2, key2) {
+                      var pane, parent3, node;
+                      return __generator(this, function(_state2) {
+                        switch (_state2.label) {
+                          case 0:
+                            return [
+                              4,
+                              onLoad({
+                                value: val2
+                              }, key2)
+                            ];
+                          case 1:
+                            pane = _state2.sent();
+                            return [
+                              4,
+                              promise
+                            ];
+                          case 2:
+                            parent3 = _state2.sent();
+                            parent3.children = pane;
+                            if (key2 === innerValue.length - 1) {
+                              return [
+                                2,
+                                Promise.resolve(parent3)
+                              ];
+                            }
+                            if (pane) {
+                              node = pane.find(function(p2) {
+                                return p2.value === val2;
+                              });
+                              return [
+                                2,
+                                Promise.resolve(node)
+                              ];
+                            }
+                            return [
+                              2
+                            ];
+                        }
+                      });
                     });
-                  });
-                  return function(p2, value3) {
-                    return _ref2.apply(this, arguments);
-                  };
-                }(), Promise.resolve(parent2))
-              ];
-            case 1:
-              last = _state.sent();
-              return [
-                4,
-                invokeLazyLoad(last)
-              ];
-            case 2:
-              _state.sent();
-              state.initLoading = false;
-              _state.label = 3;
-            case 3:
-              if (needToSync.length && [
-                defaultValue,
-                value2
-              ].includes(currentValue)) {
-                pathNodes = state.tree.getPathNodesByValue(needToSync);
-                pathNodes.forEach(function(node, index2) {
-                  state.tabsCursor = index2;
-                  chooseItem(node, true);
-                });
-              }
-              return [
-                2
-              ];
-          }
-        });
-      });
-      return function syncValue2() {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    var invokeLazyLoad = /* @__PURE__ */ function() {
-      var _ref = _async_to_generator(function(node) {
-        var parent2, lazyLoadPromise, nodes;
-        return __generator(this, function(_state) {
-          switch (_state.label) {
-            case 0:
-              if (!node) {
+                    return function(promise, val2, key2) {
+                      return _ref2.apply(this, arguments);
+                    };
+                  }(), Promise.resolve(parent2))
+                ];
+              case 2:
+                _state.sent();
+                setInnerOptions(parent2.children);
                 return [
-                  2
+                  3,
+                  4
                 ];
-              }
-              if (!state.configs.onLoad) {
-                node.leaf = true;
+              case 3:
+                error = _state.sent();
+                console.error("Error loading data:", error);
                 return [
-                  2
+                  3,
+                  4
                 ];
-              }
-              if (state.tree.isLeaf(node, isLazy()) || state.tree.hasChildren(node, isLazy())) {
+              case 4:
                 return [
                   2
                 ];
-              }
-              node.loading = true;
-              parent2 = node.root ? null : node;
-              lazyLoadPromise = state.lazyLoadMap.get(node);
-              if (!lazyLoadPromise) {
-                lazyLoadPromise = new Promise(function(resolve) {
-                  var _state_configs_onLoad, _state_configs;
-                  (_state_configs_onLoad = (_state_configs = state.configs).onLoad) === null || _state_configs_onLoad === void 0 ? void 0 : _state_configs_onLoad.call(_state_configs, node, resolve);
-                });
-                state.lazyLoadMap.set(node, lazyLoadPromise);
-              }
-              return [
-                4,
-                lazyLoadPromise
-              ];
-            case 1:
-              nodes = _state.sent();
-              if (Array.isArray(nodes) && nodes.length > 0) {
-                state.tree.updateChildren(nodes, parent2);
-              } else {
-                node.leaf = true;
-              }
-              node.loading = false;
-              state.lazyLoadMap.delete(node);
-              return [
-                2
-              ];
-          }
+            }
+          });
         });
-      });
-      return function invokeLazyLoad2(node) {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    var close = function() {
-      setInnerVisible(false);
-      onClose && onClose();
-    };
-    var closePopup = function() {
-      close();
-    };
+        return function load2() {
+          return _ref.apply(this, arguments);
+        };
+      }();
+      if (lazy) load();
+    }, [
+      lazy
+    ]);
     var chooseItem = /* @__PURE__ */ function() {
-      var _ref = _async_to_generator(function(node, type2) {
-        var pathNodes, optionParams, level, pathNodes1, optionParams1;
+      var _ref = _async_to_generator(function(pane, levelIndex) {
+        var nextValue, nextPathNodes, _props_onPathChange, asyncOptions;
         return __generator(this, function(_state) {
           switch (_state.label) {
             case 0:
-              if (!type2 && node.disabled || !state.panes[state.tabsCursor]) {
-                return [
-                  2
-                ];
-              }
-              if (state.tree.isLeaf(node, isLazy())) {
-                node.leaf = true;
-                state.panes[state.tabsCursor].selectedNode = node;
-                state.panes = state.panes.slice(0, node.level + 1);
-                if (!type2) {
-                  pathNodes = state.panes.map(function(item) {
-                    return item.selectedNode;
-                  });
-                  optionParams = pathNodes.map(function(item) {
-                    return item.value;
-                  });
-                  onChange(optionParams, pathNodes);
-                  onPathChange === null || onPathChange === void 0 ? void 0 : onPathChange(optionParams, pathNodes);
-                  setInnerValue(optionParams);
-                }
-                setOptionsData(state.panes);
-                close();
-                return [
-                  2
-                ];
-              }
-              if (state.tree.hasChildren(node, isLazy())) {
-                level = node.level + 1;
-                state.panes[state.tabsCursor].selectedNode = node;
-                state.panes = state.panes.slice(0, level);
-                state.tabsCursor = level;
-                state.panes.push({
-                  nodes: node.children || [],
-                  selectedNode: null,
-                  paneKey: "c".concat(state.tabsCursor + 1)
-                });
-                setOptionsData(state.panes);
-                setTabvalue("c".concat(state.tabsCursor + 1));
-                if (!type2) {
-                  pathNodes1 = state.panes.map(function(item) {
-                    return item.selectedNode;
-                  });
-                  optionParams1 = pathNodes1.map(function(item) {
-                    return item === null || item === void 0 ? void 0 : item.value;
-                  });
-                  onPathChange === null || onPathChange === void 0 ? void 0 : onPathChange(optionParams1, pathNodes1);
-                }
-                return [
-                  2
-                ];
-              }
-              state.currentProcessNode = node;
-              if (node.loading) {
-                return [
-                  2
-                ];
+              if (pane.disabled) return [
+                2
+              ];
+              nextValue = innerValue.slice(0, levelIndex);
+              nextPathNodes = pathNodes.current.slice(0, levelIndex);
+              if (pane.value) {
+                setLoading(!!onLoad && _define_property({}, levelIndex, pane.value));
+                nextValue[levelIndex] = pane.value;
+                nextPathNodes[levelIndex] = pane;
+                pathNodes.current = nextPathNodes;
+                props === null || props === void 0 ? void 0 : (_props_onPathChange = props.onPathChange) === null || _props_onPathChange === void 0 ? void 0 : _props_onPathChange.call(props, nextValue, pathNodes.current);
               }
+              if (!onLoad) return [
+                3,
+                3
+              ];
+              if (!!pane.leaf) return [
+                3,
+                2
+              ];
               return [
                 4,
-                invokeLazyLoad(node)
+                onLoad(pane, levelIndex)
+              ];
+            case 1:
+              asyncOptions = _state.sent();
+              if (asyncOptions) pane.children = asyncOptions;
+              return [
+                3,
+                3
               ];
-            case 1:
-              _state.sent();
-              if (state.currentProcessNode === node) {
-                state.panes[state.tabsCursor].selectedNode = node;
-                chooseItem(node, type2);
+            case 2:
+              setVisible(false);
+              setValue(nextValue);
+              _state.label = 3;
+            case 3:
+              if (!pane.children && !onLoad) {
+                setVisible(false);
+                setValue(nextValue);
               }
-              setOptionsData(state.panes);
+              setInnerValue(nextValue);
+              setLoading({});
               return [
                 2
               ];
           }
         });
       });
-      return function chooseItem2(node, type2) {
+      return function chooseItem2(pane, levelIndex) {
         return _ref.apply(this, arguments);
       };
     }();
-    var renderItem = function(pane, node, index2) {
-      var _pane_selectedNode;
-      var classPrefix22 = "nut-cascader-item";
-      var checked = ((_pane_selectedNode = pane.selectedNode) === null || _pane_selectedNode === void 0 ? void 0 : _pane_selectedNode.value) === node.value;
-      var classes = classNames({
-        active: checked,
-        disabled: node.disabled
-      }, classPrefix22);
-      var classesTitle = classNames(_define_property({}, "".concat(classPrefix22, "-title"), true));
-      var renderIcon = function() {
-        if (checked) {
-          if (/* @__PURE__ */ React.isValidElement(activeIcon)) {
-            return activeIcon;
-          }
-          return /* @__PURE__ */ React.createElement(d$6, {
-            className: "".concat(checked ? "".concat(classPrefix2, "-icon-check") : "")
-          });
-        }
-        return null;
-      };
-      return /* @__PURE__ */ React.createElement("div", {
-        style: {
-          color: checked ? activeColor : ""
-        },
-        className: classes,
-        key: index2,
-        onClick: function() {
-          chooseItem(node, false);
-        }
-      }, /* @__PURE__ */ React.createElement("div", {
-        className: classesTitle
-      }, node.text), node.loading ? /* @__PURE__ */ React.createElement(s, {
-        color: "#969799",
-        className: "nut-cascader-item-icon-loading"
-      }) : renderIcon());
+    var renderCascaderItem = function(item, levelIndex) {
+      var _item_pane;
+      return (_item_pane = item.pane) === null || _item_pane === void 0 ? void 0 : _item_pane.map(function(pane, index2) {
+        var active2 = item.selected === pane.value;
+        var classes = classNames({
+          active: active2,
+          disabled: pane.disabled
+        }, "nut-cascader-item");
+        var showLoadingIcon = loading[levelIndex] === pane.value;
+        return /* @__PURE__ */ React.createElement("div", {
+          className: classes,
+          style: {
+            color: active2 ? activeColor : ""
+          },
+          key: pane.value,
+          onClick: function() {
+            chooseItem(pane, levelIndex);
+          }
+        }, /* @__PURE__ */ React.createElement("div", {
+          className: "nut-cascader-item-title"
+        }, pane.text), showLoadingIcon && /* @__PURE__ */ React.createElement(s, {
+          color: "#969799",
+          className: "nut-cascader-item-icon-loading"
+        }), active2 && (React.isValidElement(activeIcon) ? activeIcon : /* @__PURE__ */ React.createElement(d$6, {
+          className: "".concat(classPrefix2, "-icon-check")
+        })));
+      });
     };
-    var renderTabs = function() {
+    var renderTab = function() {
       return /* @__PURE__ */ React.createElement("div", {
-        className: "".concat(classPrefix2, " ").concat(className),
-        style
+        className: classNames(classPrefix2, props.className),
+        style: props.style
       }, /* @__PURE__ */ React.createElement(Tabs, {
-        value: tabvalue,
-        title: function() {
-          return optionsData.map(function(pane, index2) {
-            var _pane_selectedNode, _pane_selectedNode1;
-            return /* @__PURE__ */ React.createElement("div", {
-              onClick: function() {
-                setTabvalue(pane.paneKey);
-                state.tabsCursor = index2;
-              },
-              className: "nut-tabs-titles-item ".concat(tabvalue === pane.paneKey ? "nut-tabs-titles-item-active" : ""),
-              key: pane.paneKey
-            }, /* @__PURE__ */ React.createElement("span", {
-              className: "nut-tabs-titles-item-text"
-            }, !state.initLoading && state.panes.length && (pane === null || pane === void 0 ? void 0 : (_pane_selectedNode = pane.selectedNode) === null || _pane_selectedNode === void 0 ? void 0 : _pane_selectedNode.text), !state.initLoading && state.panes.length && !(pane === null || pane === void 0 ? void 0 : (_pane_selectedNode1 = pane.selectedNode) === null || _pane_selectedNode1 === void 0 ? void 0 : _pane_selectedNode1.text) && "".concat(locale.select), !(!state.initLoading && state.panes.length) && "Loading..."), /* @__PURE__ */ React.createElement("span", {
-              className: "nut-tabs-titles-item-line"
-            }));
-          });
+        value: tabActiveIndex,
+        onChange: function(index2) {
+          var _props_onTabsChange;
+          (_props_onTabsChange = props.onTabsChange) === null || _props_onTabsChange === void 0 ? void 0 : _props_onTabsChange.call(props, Number(index2));
+          setTabActiveIndex(Number(index2));
         }
-      }, !state.initLoading && state.panes.length ? optionsData.map(function(pane) {
-        var _pane_nodes;
+      }, levels.map(function(pane, index2) {
         return /* @__PURE__ */ React.createElement(Tabs.TabPane, {
-          key: pane.paneKey,
-          value: pane.paneKey
+          title: pane.selected || locale.select,
+          key: index2
         }, /* @__PURE__ */ React.createElement("div", {
-          className: classesPane
-        }, (_pane_nodes = pane.nodes) === null || _pane_nodes === void 0 ? void 0 : _pane_nodes.map(function(node, index2) {
-          return renderItem(pane, node, index2);
-        })));
-      }) : /* @__PURE__ */ React.createElement(Tabs.TabPane, null, /* @__PURE__ */ React.createElement("div", {
-        className: classesPane
-      }))));
+          className: classPane
+        }, renderCascaderItem(pane, index2)));
+      })));
     };
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, popup ? /* @__PURE__ */ React.createElement(Popup, _object_spread_props(_object_spread({}, popupProps), {
-      visible: innerVisible,
+    return popup ? /* @__PURE__ */ React.createElement(Popup, _object_spread_props(_object_spread({}, popupProps), {
+      visible,
       position: "bottom",
       round: true,
       closeIcon,
       closeable,
       closeIconPosition,
-      title: popup && title,
-      left,
-      // todo 只关闭，不处理逻辑。和popup的逻辑不一致。关闭时需要增加是否要处理回调
-      onOverlayClick: closePopup,
-      onCloseIconClick: closePopup
-    }), renderTabs()) : renderTabs());
-  };
-  var Cascader = /* @__PURE__ */ React.forwardRef(InternalCascader);
+      title: props.title,
+      left: props.left,
+      onOverlayClick: function() {
+        return setVisible(false);
+      },
+      onCloseIconClick: function() {
+        return setVisible(false);
+      }
+    }), renderTab()) : renderTab();
+  });
   Cascader.displayName = "NutCascader";
   var defaultProps$1a = _object_spread_props(_object_spread({}, ComponentDefaults), {
     visible: false,
@@ -14525,6 +14338,22 @@ Please add \`${key2}Action\` when creating your handler.`);
   };
   DatePickerView.displayName = "NutDatePickerView";
   var Context = React.createContext({});
+  function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) throw new TypeError("Cannot call a class as a function");
+  }
+  function _defineProperties(target, props) {
+    for (var i2 = 0; i2 < props.length; i2++) {
+      var descriptor = props[i2];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+  function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    return Constructor;
+  }
   function _extends() {
     _extends = Object.assign ? Object.assign.bind() : function(target) {
       for (var i2 = 1; i2 < arguments.length; i2++) {
@@ -16511,6 +16340,16 @@ Please add \`${key2}Action\` when creating your handler.`);
     })));
   });
   Input.displayName = "NutInput";
+  function bound(position2, min, max) {
+    var ret = position2;
+    if (min !== void 0) {
+      ret = Math.max(position2, min);
+    }
+    if (max !== void 0) {
+      ret = Math.min(ret, max);
+    }
+    return ret;
+  }
   var defaultProps$X = _object_spread_props(_object_spread({}, ComponentDefaults), {
     disabled: false,
     readOnly: false,
@@ -16519,14 +16358,16 @@ Please add \`${key2}Action\` when creating your handler.`);
     max: 9999,
     step: 1,
     digits: 0,
-    async: false,
-    select: true
+    select: true,
+    beforeChange: function(value2) {
+      return Promise.resolve(true);
+    }
   });
   var classPrefix$h = "nut-inputnumber";
   var InputNumber = function(props) {
     var _ref = _object_spread({}, defaultProps$X, props);
     _ref.children;
-    var disabled = _ref.disabled, min = _ref.min, max = _ref.max, readOnly = _ref.readOnly, value2 = _ref.value, defaultValue = _ref.defaultValue, allowEmpty = _ref.allowEmpty, digits = _ref.digits, step = _ref.step, async = _ref.async, select = _ref.select, className = _ref.className, style = _ref.style, formatter = _ref.formatter, onPlus = _ref.onPlus, onMinus = _ref.onMinus, onOverlimit = _ref.onOverlimit, onBlur = _ref.onBlur, onFocus = _ref.onFocus, onChange = _ref.onChange, restProps = _object_without_properties(_ref, [
+    var disabled = _ref.disabled, min = _ref.min, max = _ref.max, readOnly = _ref.readOnly, value2 = _ref.value, defaultValue = _ref.defaultValue, allowEmpty = _ref.allowEmpty, digits = _ref.digits, step = _ref.step, select = _ref.select, className = _ref.className, style = _ref.style, formatter = _ref.formatter, onPlus = _ref.onPlus, onMinus = _ref.onMinus, onOverlimit = _ref.onOverlimit, onBlur = _ref.onBlur, onFocus = _ref.onFocus, onChange = _ref.onChange, beforeChange = _ref.beforeChange, restProps = _object_without_properties(_ref, [
       "children",
       "disabled",
       "min",
@@ -16537,7 +16378,6 @@ Please add \`${key2}Action\` when creating your handler.`);
       "allowEmpty",
       "digits",
       "step",
-      "async",
       "select",
       "className",
       "style",
@@ -16547,7 +16387,8 @@ Please add \`${key2}Action\` when creating your handler.`);
       "onOverlimit",
       "onBlur",
       "onFocus",
-      "onChange"
+      "onChange",
+      "beforeChange"
     ]);
     var classes = classNames(classPrefix$h, className, _define_property({}, "".concat(classPrefix$h, "-disabled"), disabled));
     var _useState = _sliced_to_array(React.useState(false), 2), focused = _useState[0], setFocused = _useState[1];
@@ -16564,24 +16405,11 @@ Please add \`${key2}Action\` when creating your handler.`);
     var _usePropsValue = _sliced_to_array(usePropsValue({
       value: typeof value2 === "string" ? parseFloat(value2) : value2,
       defaultValue: typeof defaultValue === "string" ? parseFloat(defaultValue) : defaultValue,
-      finalValue: 0,
-      onChange: function(value3) {
-      }
+      finalValue: 0
     }), 2), shadowValue = _usePropsValue[0], setShadowValue = _usePropsValue[1];
-    var bound2 = function(value3, min2, max2) {
-      var res = value3;
-      if (min2 !== void 0) {
-        res = Math.max(Number(min2), res);
-      }
-      if (max2 !== void 0) {
-        res = Math.min(Number(max2), res);
-      }
-      return res;
-    };
     var format2 = function(value3) {
       if (value3 === null) return "";
-      if (typeof value3 === "string") value3 = parseFloat(value3);
-      var fixedValue = bound2(value3, Number(min), Number(max));
+      var fixedValue = bound(typeof value3 === "string" ? parseFloat(value3) : value3, Number(min), Number(max));
       if (formatter) {
         return formatter(fixedValue);
       }
@@ -16592,97 +16420,155 @@ Please add \`${key2}Action\` when creating your handler.`);
     };
     var _useState1 = _sliced_to_array(React.useState(format2(shadowValue)), 2), inputValue = _useState1[0], setInputValue = _useState1[1];
     React.useEffect(function() {
-      if (!focused && !async) {
-        setShadowValue(bound2(Number(shadowValue), Number(min), Number(max)));
+      if (!focused) {
         setInputValue(format2(shadowValue));
       }
     }, [
       focused,
       shadowValue
     ]);
-    React.useEffect(function() {
-      if (async) {
-        setShadowValue(bound2(Number(value2), Number(min), Number(max)));
-        setInputValue(format2(value2));
-      }
-    }, [
-      value2
-    ]);
-    var calcNextValue = function(current, step2, symbol) {
+    var calcNextValue = function(current, stepValue, symbol) {
       var dig = digits + 1;
-      return (parseFloat(current || "0") * dig + parseFloat(step2) * dig * symbol) / dig;
-    };
-    var update2 = function(negative, e2) {
-      if (step !== void 0) {
-        var shouldOverBoundary = calcNextValue(shadowValue, step, negative ? -1 : 1);
-        var nextValue = bound2(shouldOverBoundary, Number(min), Number(max));
-        setShadowValue(nextValue);
-        if (negative ? shouldOverBoundary < Number(min) : shouldOverBoundary > Number(max)) {
-          onOverlimit === null || onOverlimit === void 0 ? void 0 : onOverlimit(e2);
-        } else {
-          onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, e2);
-        }
-      }
-    };
-    var handleReduce = function(e2) {
-      if (disabled) return;
-      onMinus === null || onMinus === void 0 ? void 0 : onMinus(e2);
-      update2(true, e2);
-    };
-    var handlePlus = function(e2) {
-      if (disabled) return;
-      onPlus === null || onPlus === void 0 ? void 0 : onPlus(e2);
-      update2(false, e2);
+      var currentValue = parseFloat(current || "0");
+      var stepAmount = parseFloat(stepValue) * symbol;
+      return (currentValue * dig + stepAmount * dig) / dig;
     };
+    var update2 = /* @__PURE__ */ function() {
+      var _ref2 = _async_to_generator(function(negative, e2) {
+        var shouldOverBoundary, maybeResume, nextValue;
+        return __generator(this, function(_state) {
+          switch (_state.label) {
+            case 0:
+              if (step === void 0) return [
+                2
+              ];
+              negative ? onMinus === null || onMinus === void 0 ? void 0 : onMinus(e2) : onPlus === null || onPlus === void 0 ? void 0 : onPlus(e2);
+              shouldOverBoundary = calcNextValue(bound(Number(shadowValue), Number(min), Number(max)), step, negative ? -1 : 1);
+              return [
+                4,
+                beforeChange(Number(shouldOverBoundary))
+              ];
+            case 1:
+              maybeResume = _state.sent();
+              if (!maybeResume) return [
+                2
+              ];
+              nextValue = bound(shouldOverBoundary, Number(min), Number(max));
+              setShadowValue(nextValue);
+              if (negative ? shouldOverBoundary < Number(min) : shouldOverBoundary > Number(max)) {
+                onOverlimit === null || onOverlimit === void 0 ? void 0 : onOverlimit(e2);
+              } else {
+                onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, e2);
+              }
+              return [
+                2
+              ];
+          }
+        });
+      });
+      return function update3(negative, e2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    var handleReduce = /* @__PURE__ */ function() {
+      var _ref2 = _async_to_generator(function(e2) {
+        return __generator(this, function(_state) {
+          switch (_state.label) {
+            case 0:
+              if (disabled) return [
+                2
+              ];
+              return [
+                4,
+                update2(true, e2)
+              ];
+            case 1:
+              _state.sent();
+              return [
+                2
+              ];
+          }
+        });
+      });
+      return function handleReduce2(e2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    var handlePlus = /* @__PURE__ */ function() {
+      var _ref2 = _async_to_generator(function(e2) {
+        return __generator(this, function(_state) {
+          switch (_state.label) {
+            case 0:
+              if (disabled) return [
+                2
+              ];
+              return [
+                4,
+                update2(false, e2)
+              ];
+            case 1:
+              _state.sent();
+              return [
+                2
+              ];
+          }
+        });
+      });
+      return function handlePlus2(e2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
     var parseValue = function(text2) {
       if (text2 === "") return null;
       if (text2 === "-") return null;
       return text2;
     };
-    var clampValue = function(valueStr) {
-      if (valueStr === null) return defaultValue;
-      var val2 = Number(parseFloat(valueStr || "0").toFixed(digits));
-      return Math.max(Number(min), Math.min(Number(max), val2));
-    };
-    var handleValueChange = function(valueStr, e2) {
-      var val2 = clampValue(valueStr);
-      if (val2 !== Number(shadowValue)) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(val2, e2);
-      }
-    };
-    var handleInputChange = function(e2) {
-      setInputValue(e2.target.value);
-      var valueStr = parseValue(e2.target.value);
-      if (valueStr === null) {
-        if (allowEmpty) {
-          setShadowValue(null);
-        } else {
-          setShadowValue(defaultValue);
-        }
-      } else {
-        setShadowValue(clampValue(valueStr));
-      }
-      !async && handleValueChange(valueStr, e2);
-    };
+    var handleInputChange = /* @__PURE__ */ function() {
+      var _ref2 = _async_to_generator(function(e2) {
+        var valueStr, maybeResume;
+        return __generator(this, function(_state) {
+          switch (_state.label) {
+            case 0:
+              setInputValue(e2.target.value);
+              valueStr = parseValue(e2.target.value);
+              return [
+                4,
+                beforeChange(Number(valueStr))
+              ];
+            case 1:
+              maybeResume = _state.sent();
+              if (!maybeResume) return [
+                2
+              ];
+              setShadowValue(
+                // eslint-disable-next-line no-nested-ternary
+                valueStr === null ? allowEmpty ? null : defaultValue : valueStr
+              );
+              if (valueStr !== null && (Number(valueStr) < Number(min) || Number(valueStr) > Number(max))) {
+                onOverlimit === null || onOverlimit === void 0 ? void 0 : onOverlimit(e2);
+              } else {
+                onChange === null || onChange === void 0 ? void 0 : onChange(parseFloat(valueStr || "0").toFixed(digits), e2);
+              }
+              return [
+                2
+              ];
+          }
+        });
+      });
+      return function handleInputChange2(e2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
     var handleFocus = function(e2) {
       setFocused(true);
-      setInputValue(shadowValue !== void 0 && shadowValue !== null ? bound2(Number(shadowValue), Number(min), Number(max)).toString() : "");
+      setInputValue(shadowValue !== void 0 && shadowValue !== null ? bound(Number(shadowValue), Number(min), Number(max)).toString() : "");
       onFocus === null || onFocus === void 0 ? void 0 : onFocus(e2);
     };
     var handleBlur = function(e2) {
       setFocused(false);
-      onBlur === null || onBlur === void 0 ? void 0 : onBlur(e2);
+      onBlur && onBlur(e2);
       var valueStr = parseValue(e2.target.value);
-      if (valueStr === null) {
-        if (allowEmpty) {
-          setShadowValue(null);
-        } else {
-          setShadowValue(defaultValue);
-        }
-      } else {
-        setShadowValue(clampValue(valueStr));
-      }
-      async && handleValueChange(valueStr, e2);
+      onChange === null || onChange === void 0 ? void 0 : onChange(parseFloat(valueStr || "0").toFixed(digits), e2);
     };
     return /* @__PURE__ */ React.createElement("div", _object_spread({
       className: classes,
@@ -37930,16 +37816,6 @@ Please add \`${key2}Action\` when creating your handler.`);
     })))), document.body));
   };
   Popover.displayName = "NutPopover";
-  function bound(position2, min, max) {
-    var ret = position2;
-    {
-      ret = Math.max(position2, min);
-    }
-    {
-      ret = Math.min(ret, max);
-    }
-    return ret;
-  }
   function rubberband(distance, dimension, constant) {
     return distance * dimension * constant / (dimension + constant * distance);
   }
@@ -38842,7 +38718,7 @@ Please add \`${key2}Action\` when creating your handler.`);
   var messageInstance = null;
   var defaultProps$u = _object_spread_props(_object_spread({}, defaultOverlayProps), {
     id: "",
-    position: "center",
+    position: "middle",
     title: "",
     size: "base",
     icon: null,
@@ -40128,7 +40004,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       "direction"
     ]);
     var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix$3, "-vertical"), direction === "vertical"), _define_property(_obj, "".concat(classPrefix$3, "-white"), color === "white"), _define_property(_obj, "".concat(classPrefix$3, "-track"), type2 === "slide"), _obj));
+    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix$3, "-vertical"), direction === "vertical"), _define_property(_obj, "".concat(classPrefix$3, "-white"), color === "default"), _define_property(_obj, "".concat(classPrefix$3, "-track"), type2 === "slide"), _obj));
     var renderDotElement = function() {
       var childs = [];
       for (var item = 0; item < total; item++) {
@@ -40166,21 +40042,6 @@ Please add \`${key2}Action\` when creating your handler.`);
     }, rest), renderByType(type2));
   };
   Indicator.displayName = "NutIndicator";
-  var getRefValue = function(ref) {
-    return ref.current;
-  };
-  var useRefState = function(param) {
-    var ref = React.useRef(param);
-    var _useState = _sliced_to_array(React.useState(param), 2), setState = _useState[1];
-    var updateState = function(p2) {
-      ref.current = p2;
-      setState(p2);
-    };
-    return [
-      ref,
-      updateState
-    ];
-  };
   var getPerSlidePosition$1 = function(index2, position2, loop2, count) {
     var currentPosition = index2 * 100 + position2;
     if (loop2) {
@@ -40757,6 +40618,83 @@ Please add \`${key2}Action\` when creating your handler.`);
     }, closeIcon === true ? /* @__PURE__ */ React.createElement(n$6, null) : closeIcon) : null);
   };
   ImagePreview.displayName = "NutImagePreview";
+  var defaultPaginationOptions = {
+    current: 0,
+    itemsPerPage: 10,
+    displayCount: 5,
+    ellipse: false
+  };
+  function human2Machine(number2) {
+    return --number2;
+  }
+  function calculateNodes(options2, nodesCount) {
+    var halfIndex = Math.floor(options2.displayCount / 2);
+    var buttonsCountIndex = human2Machine(nodesCount);
+    var displayCountIndex = human2Machine(options2.displayCount);
+    var currentIndex = human2Machine(options2.current);
+    var start2;
+    var end;
+    if (buttonsCountIndex <= displayCountIndex) {
+      start2 = 0;
+      end = buttonsCountIndex;
+    } else {
+      start2 = Math.max(0, currentIndex - halfIndex);
+      end = Math.min(buttonsCountIndex, currentIndex + halfIndex);
+      if (end - start2 < displayCountIndex) {
+        if (start2 === 0) {
+          end = Math.min(start2 + displayCountIndex, buttonsCountIndex);
+        } else if (end === buttonsCountIndex) {
+          start2 = Math.max(end - displayCountIndex, 1);
+        }
+      } else if (end - start2 > displayCountIndex) {
+        end = start2 + displayCountIndex;
+      }
+    }
+    var buttons = [];
+    for (var i2 = start2; i2 <= end; i2++) {
+      var humanPageNumber = i2 + 1;
+      buttons.push({
+        number: humanPageNumber,
+        text: humanPageNumber.toString(),
+        selected: options2.current === humanPageNumber
+      });
+    }
+    return addEllipses(buttons, {
+      nodesCount,
+      ellipse: options2.ellipse,
+      displayCount: options2.displayCount
+    });
+  }
+  function addEllipses(nodes, param) {
+    var displayCount = param.displayCount, nodesCount = param.nodesCount, ellipse = param.ellipse;
+    if (nodesCount <= displayCount || !ellipse) return nodes;
+    var start2 = nodes[0];
+    var end = nodes[nodes.length - 1];
+    var leftEllipse = start2.number > 1;
+    var rightEllipse = end.number < nodesCount;
+    if (leftEllipse) {
+      nodes.unshift({
+        number: start2.number - 1,
+        text: "..."
+      });
+    }
+    if (rightEllipse) {
+      nodes.push({
+        number: end.number + 1,
+        text: "..."
+      });
+    }
+    return nodes;
+  }
+  var usePagination = function(options2) {
+    var mergedOptions = _object_spread({}, defaultPaginationOptions, options2);
+    var total = mergedOptions.total, itemsPerPage = mergedOptions.itemsPerPage;
+    var nodesCount = Math.ceil((total || 0) / itemsPerPage) || 1;
+    return [
+      calculateNodes(mergedOptions, nodesCount),
+      nodesCount
+    ];
+  };
   var defaultProps$f = _object_spread_props(_object_spread({}, ComponentDefaults), {
     defaultValue: 1,
     mode: "multi",
@@ -40792,88 +40730,60 @@ Please add \`${key2}Action\` when creating your handler.`);
       defaultValue,
       finalValue: 1,
       onChange
-    }), 2), currentPage = _usePropsValue[0], setCurrentPage = _usePropsValue[1];
-    var pageCount = React.useMemo(function() {
-      var num = Math.ceil(total / pageSize);
-      return Number.isNaN(num) ? 1 : Math.max(1, num);
-    }, [
+    }), 2), current = _usePropsValue[0], setCurrent = _usePropsValue[1];
+    var _usePagination = _sliced_to_array(usePagination({
       total,
-      pageSize
-    ]);
-    var pages = React.useMemo(function() {
-      var items = [];
-      var startPage = 1;
-      var endPage = pageCount;
-      var partialShow = pageCount > itemSize;
-      if (partialShow) {
-        startPage = Math.max(currentPage - Math.floor(itemSize / 2), 1);
-        endPage = startPage + itemSize - 1;
-        if (endPage > pageCount) {
-          endPage = pageCount;
-          startPage = endPage - itemSize + 1;
-        }
-      }
-      for (var i2 = startPage; i2 <= endPage; i2++) {
-        items.push({
-          number: i2,
-          text: i2
-        });
-      }
-      if (partialShow && itemSize > 0 && ellipse) {
-        if (startPage > 1) {
-          items.unshift({
-            number: startPage - 1,
-            text: "..."
-          });
-        }
-        if (endPage < pageCount) {
-          items.push({
-            number: endPage + 1,
-            text: "..."
-          });
-        }
-      }
-      return items;
-    }, [
-      currentPage,
-      itemSize,
-      pageCount
-    ]);
-    var handleSelectPage = function(curPage) {
-      if (curPage > pageCount || curPage < 1) return;
-      setCurrentPage(curPage);
+      ellipse,
+      current,
+      displayCount: itemSize,
+      itemsPerPage: pageSize
+    }), 2), pages = _usePagination[0], pageCount = _usePagination[1];
+    var handleClick = function(item) {
+      if (item.selected) return;
+      if (item.number > pageCount || item.number < 1) return;
+      setCurrent(item.number);
+    };
+    var prevPage = function() {
+      var prev2 = current - 1;
+      prev2 >= 1 && setCurrent(prev2);
     };
+    var nextPage = function() {
+      var next2 = current + 1;
+      next2 <= pageCount && setCurrent(next2);
+    };
+    var _obj, _obj1;
     return /* @__PURE__ */ React.createElement("div", _object_spread({
       className: classNames(classPrefix2, className)
     }, rest), (mode === "multi" || mode === "simple") && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-      className: classNames("".concat(classPrefix2, "-prev"), mode === "multi" ? "" : "".concat(classPrefix2, "-simple-border"), currentPage === 1 ? "".concat(classPrefix2, "-prev-disabled") : ""),
-      onClick: function(e2) {
-        return handleSelectPage(currentPage - 1);
+      className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-prev"), true), _define_property(_obj, "".concat(classPrefix2, "-simple-border"), mode !== "multi"), _define_property(_obj, "".concat(classPrefix2, "-prev-disabled"), current === 1), _obj)),
+      onClick: function() {
+        return prevPage();
       }
     }, prev || locale.pagination.prev), mode === "multi" && /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-contain")
     }, pages.map(function(item, index2) {
+      var _obj2;
       return /* @__PURE__ */ React.createElement("div", {
         key: "".concat(index2, "pagination"),
-        className: classNames("".concat(classPrefix2, "-item"), _define_property({}, "".concat(classPrefix2, "-item-active"), item.number === currentPage)),
-        onClick: function(e2) {
-          item.number !== currentPage && handleSelectPage(item.number);
+        className: classNames((_obj2 = {}, _define_property(_obj2, "".concat(classPrefix2, "-item"), true), _define_property(_obj2, "".concat(classPrefix2, "-item-active"), item.selected), _obj2)),
+        onClick: function() {
+          handleClick(item);
         }
-      }, itemRender ? itemRender(item, currentPage) : item.text);
+      }, itemRender ? itemRender(item, current) : item.text);
     })), mode === "simple" && /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-contain")
     }, /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-simple")
-    }, currentPage, "/", pageCount)), /* @__PURE__ */ React.createElement("div", {
-      className: classNames("".concat(classPrefix2, "-next"), currentPage >= pageCount ? "".concat(classPrefix2, "-next-disabled") : ""),
-      onClick: function(e2) {
-        return handleSelectPage(currentPage + 1);
+    }, current, "/", pageCount)), /* @__PURE__ */ React.createElement("div", {
+      className: classNames((_obj1 = {}, _define_property(_obj1, "".concat(classPrefix2, "-next"), true), _define_property(_obj1, "".concat(classPrefix2, "-next-disabled"), current >= pageCount), _obj1)),
+      onClick: function() {
+        return nextPage();
       }
     }, next || locale.pagination.next)), mode === "lite" && /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-lite")
     }, /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-lite-active")
-    }, currentPage), /* @__PURE__ */ React.createElement("div", {
+    }, current), /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-lite-spliterator")
     }, "/"), /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix2, "-lite-default")
@@ -42905,6 +42815,7 @@ Please add \`${key2}Action\` when creating your handler.`);
   exports.Segmented = Segmented;
   exports.ShortPassword = ShortPassword;
   exports.SideBar = SideBar;
+  exports.SideBarItem = SideBarItem;
   exports.Signature = Signature;
   exports.Skeleton = Skeleton;
   exports.Space = Space;