@nutui/nutui-react 2.6.21 → 2.6.23

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.21 Fri Sep 27 2024 14:09:32 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.23 Fri Oct 18 2024 14:16:05 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -635,7 +635,7 @@ const Button = React__default.forwardRef(
     };
     const getStyle = useCallback(() => {
       const style2 = {};
-      if (props.color) {
+      if (color) {
         if (props.fill === "outline" || props.fill === "dashed") {
           style2.color = color;
           if (!(color == null ? void 0 : color.includes("gradient"))) {
@@ -648,7 +648,7 @@ const Button = React__default.forwardRef(
         }
       }
       return style2;
-    }, [color]);
+    }, [color, props.fill]);
     const handleClick2 = (e) => {
       if (!loading && !disabled && onClick) {
         onClick(e);
@@ -1854,7 +1854,7 @@ const zhCN = {
 };
 const inBrowser = typeof window !== "undefined";
 function requestAniFrame() {
-  if (typeof window !== "undefined") {
+  if (inBrowser) {
     const _window = window;
     return _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || function(callback) {
       _window.setTimeout(callback, 1e3 / 60);
@@ -1864,22 +1864,30 @@ function requestAniFrame() {
     setTimeout(callback, 1e3 / 60);
   };
 }
+function cancelRaf(id) {
+  if (inBrowser) {
+    const _window = window;
+    (_window.cancelAnimationFrame || _window.webkitCancelAnimationFrame)(id);
+  } else {
+    clearTimeout(id);
+  }
+}
 const requestAniFrame$1 = requestAniFrame();
 const classPrefix$p = "nut-configprovider";
-const defaultConfigRef$1 = {
+const defaultConfigRef = {
   current: {
     locale: zhCN
   }
 };
 const setDefaultConfig = (config2) => {
-  defaultConfigRef$1.current = config2;
+  defaultConfigRef.current = config2;
 };
-const getDefaultConfig$1 = () => {
-  return defaultConfigRef$1.current;
+const getDefaultConfig = () => {
+  return defaultConfigRef.current;
 };
-const ConfigContext$1 = createContext(null);
-const useConfig$1 = () => {
-  return useContext(ConfigContext$1) ?? getDefaultConfig$1();
+const ConfigContext = createContext(null);
+const useConfig = () => {
+  return useContext(ConfigContext) ?? getDefaultConfig();
 };
 function convertThemeVarsToCSSVars(themeVars) {
   const cssVars = {};
@@ -1889,7 +1897,7 @@ function convertThemeVarsToCSSVars(themeVars) {
   return cssVars;
 }
 const useRtl = () => {
-  const { direction } = useConfig$1();
+  const { direction } = useConfig();
   if (direction) {
     return direction === "rtl";
   }
@@ -1900,7 +1908,7 @@ const ConfigProvider = (props) => {
   const mergedConfig = useMemo(
     () => {
       return {
-        ...getDefaultConfig$1(),
+        ...getDefaultConfig(),
         ...config2,
         direction
       };
@@ -1914,7 +1922,7 @@ const ConfigProvider = (props) => {
   const cssVarStyle = React__default.useMemo(() => {
     return convertThemeVarsToCSSVars(mergedConfig.theme || {});
   }, [mergedConfig.theme]);
-  return /* @__PURE__ */ React__default.createElement(ConfigContext$1.Provider, { value: mergedConfig }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(ConfigContext.Provider, { value: mergedConfig }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       className: classNames(classPrefix$p, className),
@@ -2782,7 +2790,8 @@ const Overlay = (props) => {
       setInnerVisible(false);
     }
   }, [visible]);
-  useLockScroll(nodeRef, !!lockScroll && innerVisible);
+  const shouldLockScroll = !innerVisible ? false : lockScroll;
+  useLockScroll(nodeRef, shouldLockScroll);
   const classes = classNames(classPrefix2, className);
   const styles = {
     ...style
@@ -3336,31 +3345,36 @@ const BackTop = (props) => {
   const [scrollTop, SetScrollTop] = useState(0);
   let startTime = 0;
   const scrollEl = useRef(null);
-  useEffect(() => {
-    init();
-    return () => removeEventListener();
-  }, []);
-  const init = () => {
+  const cls = classNames(classPrefix2, { show: backTop }, className);
+  const scrollListener = useCallback(() => {
+    var _a;
+    let top = null;
+    if (scrollEl.current instanceof Window) {
+      top = scrollEl.current.scrollY;
+    } else {
+      top = (_a = scrollEl.current) == null ? void 0 : _a.scrollTop;
+    }
+    SetScrollTop(top);
+    SetBackTop(top >= threshold);
+  }, [threshold]);
+  const init = useCallback(() => {
+    var _a, _b;
     if (target && document.getElementById(target)) {
       scrollEl.current = document.getElementById(target);
     } else {
       scrollEl.current = window;
     }
-    addEventListener();
-    initCancelAniFrame();
-  };
-  const scrollListener = () => {
-    let top = null;
-    if (scrollEl.current instanceof Window) {
-      top = scrollEl.current.pageYOffset;
-      SetScrollTop(top);
-    } else {
-      top = scrollEl.current.scrollTop;
-      SetScrollTop(top);
-    }
-    const showBtn = top >= threshold;
-    SetBackTop(showBtn);
-  };
+    (_a = scrollEl.current) == null ? void 0 : _a.addEventListener("scroll", scrollListener, false);
+    (_b = scrollEl.current) == null ? void 0 : _b.addEventListener("resize", scrollListener, false);
+  }, [target, scrollListener]);
+  useEffect(() => {
+    init();
+    return () => {
+      var _a, _b;
+      (_a = scrollEl.current) == null ? void 0 : _a.removeEventListener("scroll", scrollListener, false);
+      (_b = scrollEl.current) == null ? void 0 : _b.removeEventListener("resize", scrollListener, false);
+    };
+  }, [init, scrollListener]);
   const scroll = (y = 0) => {
     if (scrollEl.current instanceof Window) {
       window.scrollTo(0, y);
@@ -3376,27 +3390,13 @@ const BackTop = (props) => {
       scroll(y);
       cid = requestAniFrame$1(fn);
       if (t === duration || y === 0) {
-        window.cancelAnimationFrame(cid);
+        cancelRaf(cid);
       }
     });
   };
-  const initCancelAniFrame = () => {
-    window.cancelAnimationFrame = window.webkitCancelAnimationFrame;
-  };
-  function addEventListener() {
-    var _a, _b;
-    (_a = scrollEl.current) == null ? void 0 : _a.addEventListener("scroll", scrollListener, false);
-    (_b = scrollEl.current) == null ? void 0 : _b.addEventListener("resize", scrollListener, false);
-  }
-  function removeEventListener() {
-    var _a, _b;
-    (_a = scrollEl.current) == null ? void 0 : _a.removeEventListener("scroll", scrollListener, false);
-    (_b = scrollEl.current) == null ? void 0 : _b.removeEventListener("resize", scrollListener, false);
-  }
   const goTop = (e) => {
     onClick && onClick(e);
-    const otime = +/* @__PURE__ */ new Date();
-    startTime = otime;
+    startTime = +/* @__PURE__ */ new Date();
     duration > 0 ? scrollAnimation() : scroll();
   };
   const styles = Object.keys(style || {}).length !== 0 ? {
@@ -3407,23 +3407,7 @@ const BackTop = (props) => {
     bottom: "20px",
     zIndex
   };
-  return /* @__PURE__ */ React__default.createElement(
-    "div",
-    {
-      className: classNames(
-        classPrefix2,
-        {
-          show: backTop
-        },
-        className
-      ),
-      style: styles,
-      onClick: (e) => {
-        goTop(e);
-      }
-    },
-    children || /* @__PURE__ */ React__default.createElement(s$1, { width: 19, height: 19, className: "nut-backtop-main" })
-  );
+  return /* @__PURE__ */ React__default.createElement("div", { className: cls, style: styles, onClick: (e) => goTop(e) }, children || /* @__PURE__ */ React__default.createElement(s$1, { width: 19, height: 19, className: "nut-backtop-main" }));
 };
 BackTop.displayName = "NutBackTop";
 function clamp$2(v, min, max) {
@@ -8461,7 +8445,7 @@ const defaultProps$1g = {
   }
 };
 const FixedNav = (props) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     className,
     overlay,
@@ -8626,11 +8610,10 @@ const NavBar = (props) => {
   };
   const classes = classNames({
     [`${classPrefix2}-fixed`]: fixed,
-    [`${classPrefix2}-safe-area-inset-top`]: safeAreaInsetTop,
     [`${classPrefix2}-title-align-${titleAlign}`]: true
   });
   const cls = classNames(classPrefix2, classes, className);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, fixed && placeholder ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, safeAreaInsetTop && /* @__PURE__ */ React__default.createElement(SafeArea, { position: "top" }), fixed && placeholder ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
 };
 NavBar.displayName = "NutNavBar";
 const defaultProps$1e = {
@@ -8693,7 +8676,8 @@ const Popup = (props) => {
   const [innerVisible, setInnerVisible] = useState(visible);
   const [showChildren, setShowChildren] = useState(true);
   const [transitionName, setTransitionName] = useState("");
-  useLockScroll(nodeRef, innerVisible && lockScroll);
+  const shouldLockScroll = !innerVisible ? false : lockScroll;
+  useLockScroll(nodeRef, shouldLockScroll);
   const classPrefix2 = "nut-popup";
   const baseStyle = {
     zIndex: index
@@ -9559,19 +9543,6 @@ class Tree {
     return pathNodes;
   }
 }
-const defaultConfigRef = {
-  current: {
-    locale: zhCN,
-    direction: "ltr"
-  }
-};
-const getDefaultConfig = () => {
-  return defaultConfigRef.current;
-};
-const ConfigContext = createContext(null);
-const useConfig = () => {
-  return useContext(ConfigContext) ?? getDefaultConfig();
-};
 const defaultProps$16 = {
   ...ComponentDefaults,
   activeColor: "",
@@ -9988,7 +9959,7 @@ const defaultProps$14 = {
   custom: false
 };
 const ExistRender = (props) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     children,
     type: type4,
@@ -10044,7 +10015,7 @@ const defaultProps$13 = {
   backIcon: null
 };
 const InternalAddress = (props, ref) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     style,
     className,
@@ -10439,7 +10410,7 @@ const defaultProps$12 = {
   }
 };
 const CalendarItem = React__default.forwardRef((props, ref) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     style,
     className,
@@ -10461,6 +10432,7 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
     firstDayOfWeek,
     disableDate,
     renderHeaderButtons,
+    renderBottomButton,
     renderDay,
     renderDayTop,
     renderDayBottom,
@@ -11003,7 +10975,7 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
     );
   };
   const renderFooter = () => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: "nut-calendar-footer" }, children, /* @__PURE__ */ React__default.createElement("div", { className: "calendar-confirm-btn", onClick: confirm2 }, confirmText || locale.confirm));
+    return /* @__PURE__ */ React__default.createElement("div", { className: "nut-calendar-footer" }, children, /* @__PURE__ */ React__default.createElement("div", { onClick: confirm2 }, renderBottomButton ? renderBottomButton() : /* @__PURE__ */ React__default.createElement("div", { className: "calendar-confirm-btn" }, confirmText || locale.confirm)));
   };
   return /* @__PURE__ */ React__default.createElement("div", { className: classes, style }, renderHeader(), renderContent(), popup && !autoBackfill ? renderFooter() : "");
 });
@@ -11041,7 +11013,7 @@ const defaultProps$11 = {
   }
 };
 const Calendar = React__default.forwardRef((props, ref) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     style,
     className,
@@ -11062,8 +11034,10 @@ const Calendar = React__default.forwardRef((props, ref) => {
     showSubTitle,
     scrollAnimation,
     firstDayOfWeek,
+    closeIcon,
     disableDate,
     renderHeaderButtons,
+    renderBottomButton,
     renderDay,
     renderDayTop,
     renderDayBottom,
@@ -11106,6 +11080,7 @@ const Calendar = React__default.forwardRef((props, ref) => {
         children,
         type: type4,
         autoBackfill,
+        renderBottomButton,
         popup,
         title: title || locale.calendaritem.title,
         defaultValue,
@@ -11138,6 +11113,7 @@ const Calendar = React__default.forwardRef((props, ref) => {
       position: "bottom",
       round: true,
       closeable: true,
+      closeIcon,
       destroyOnClose: true,
       onOverlayClick: closePopup,
       onCloseIconClick: closePopup,
@@ -11258,7 +11234,7 @@ const defaultProps$10 = {
 };
 const prefixCls = "nut-calendarcard";
 const CalendarCard = React__default.forwardRef((props, ref) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     style,
     className,
@@ -12104,7 +12080,7 @@ const defaultProps$Z = {
   duration: 1e3
 };
 const InternalPicker = (props, ref) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     children,
     visible,
@@ -12400,7 +12376,7 @@ const DatePicker = (props) => {
     ...defaultProps$Y,
     ...props
   };
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const lang = locale.datepicker;
   const zhCNType = {
     day: lang.day,
@@ -14207,7 +14183,7 @@ const defaultProps$V = {
 const Input = forwardRef(
   (props, ref) => {
     const rtl = useRtl();
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       type: type4,
       name,
@@ -14679,9 +14655,21 @@ const MenuItem = forwardRef((props, ref) => {
   useEffect(() => {
     setShowPopup(show2);
   }, [show2]);
+  const getParentOffset = useCallback(() => {
+    setTimeout(() => {
+      const p2 = parent.menuRef.current;
+      if (p2) {
+        const rect = p2.getBoundingClientRect();
+        setPosition({
+          height: rect.height,
+          top: rect.top
+        });
+      }
+    });
+  }, [parent.menuRef]);
   useEffect(() => {
     getParentOffset();
-  }, [showPopup]);
+  }, [showPopup, getParentOffset]);
   useImperativeHandle(ref, () => ({
     toggle: (s2) => {
       const from = "REF";
@@ -14715,18 +14703,6 @@ const MenuItem = forwardRef((props, ref) => {
   const scrollParent = useMemo$1(() => {
     return getScrollParent(parent.menuRef, window);
   }, [parent.menuRef]);
-  const getParentOffset = () => {
-    setTimeout(() => {
-      const p2 = parent.menuRef.current;
-      if (p2) {
-        const rect = p2.getBoundingClientRect();
-        setPosition({
-          height: rect.height,
-          top: rect.top
-        });
-      }
-    });
-  };
   useEffect(() => {
     if (!parent.lockScroll) {
       scrollParent == null ? void 0 : scrollParent.addEventListener("scroll", getParentOffset, false);
@@ -14734,7 +14710,7 @@ const MenuItem = forwardRef((props, ref) => {
         scrollParent == null ? void 0 : scrollParent.removeEventListener("scroll", getParentOffset, false);
       };
     }
-  }, []);
+  }, [parent.lockScroll, scrollParent, getParentOffset]);
   const getPosition = () => {
     return direction === "down" ? {
       top: `${position.top + position.height}px`,
@@ -14865,24 +14841,29 @@ const Menu = (props) => {
     ...props
   };
   const menuRef = useRef(null);
+  const [showMenuItem, setShowMenuItem] = useState([]);
+  const [menuItemTitle, setMenuItemTitle] = useState([]);
   const [isScrollFixed, setIsScrollFixed] = useState(false);
+  const cls = classNames(`nut-menu`, className, {
+    "scroll-fixed": isScrollFixed
+  });
   const getScrollTop = (el) => {
-    return Math.max(0, "scrollTop" in el ? el.scrollTop : el.pageYOffset);
+    return Math.max(
+      0,
+      el === window ? window.scrollY : el.scrollTop
+    );
   };
-  const onScroll = () => {
-    const { scrollFixed: scrollFixed2 } = props;
+  const onScroll = useCallback(() => {
     const scrollTop = getScrollTop(window);
-    const isFixed = scrollTop > (typeof scrollFixed2 === "boolean" ? 30 : Number(scrollFixed2));
+    const isFixed = scrollTop > (typeof scrollFixed === "boolean" ? 30 : Number(scrollFixed));
     setIsScrollFixed(isFixed);
-  };
+  }, [scrollFixed]);
   useEffect(() => {
     if (scrollFixed) {
       window.addEventListener("scroll", onScroll);
     }
     return () => window.removeEventListener("scroll", onScroll);
-  }, []);
-  const [showMenuItem, setShowMenuItem] = useState([]);
-  const [menuItemTitle, setMenuItemTitle] = useState([]);
+  }, [scrollFixed, onScroll]);
   const toggleMenuItem = (index, from = "NORMAL") => {
     showMenuItem[index] = !showMenuItem[index];
     if (showMenuItem[index]) {
@@ -14986,26 +14967,15 @@ const Menu = (props) => {
       return null;
     });
   };
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ...rest, className: cls, ref: menuRef }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      ...rest,
-      className: classNames(`nut-menu`, className, {
-        "scroll-fixed": isScrollFixed
-      }),
-      ref: menuRef
+      className: classNames("nut-menu-bar", {
+        opened: showMenuItem.includes(true)
+      })
     },
-    /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: classNames("nut-menu-bar", {
-          opened: showMenuItem.includes(true)
-        })
-      },
-      menuTitle()
-    ),
-    cloneChildren()
-  );
+    menuTitle()
+  ), cloneChildren());
 };
 Menu.displayName = "NutMenu";
 Menu.Item = MenuItem;
@@ -15020,7 +14990,7 @@ const defaultProps$R = {
   }
 };
 const NumberKeyboard = (props) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     title,
     rightActions,
@@ -15202,6 +15172,13 @@ const RadioGroup = React__default.forwardRef(
       disabled,
       ...rest
     } = { ...defaultProps$Q, ...props };
+    const cls = classNames(
+      classPrefix$f,
+      {
+        [`${classPrefix$f}-${props.direction}`]: props.direction
+      },
+      className
+    );
     const [val2State, setVal2State] = usePropsValue({
       defaultValue: props.defaultValue,
       value: props.value,
@@ -15224,7 +15201,7 @@ const RadioGroup = React__default.forwardRef(
           }
         );
       });
-    }, [options2]);
+    }, [options2, labelPosition, val2State]);
     return /* @__PURE__ */ React__default.createElement(
       RadioContext.Provider,
       {
@@ -15241,20 +15218,7 @@ const RadioGroup = React__default.forwardRef(
           }
         }
       },
-      /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          className: classNames(
-            classPrefix$f,
-            {
-              [`${classPrefix$f}-${props.direction}`]: props.direction
-            },
-            className
-          ),
-          ...rest
-        },
-        (options2 == null ? void 0 : options2.length) ? renderOptionsChildren() : children
-      )
+      /* @__PURE__ */ React__default.createElement("div", { className: cls, ...rest }, (options2 == null ? void 0 : options2.length) ? renderOptionsChildren() : children)
     );
   }
 );
@@ -15312,29 +15276,6 @@ const Radio = (props) => {
       }
     };
   }
-  const renderLabel = () => {
-    return /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: classNames(`${classPrefix2}-label`, {
-          [`${classPrefix2}-label-disabled`]: disabled
-        })
-      },
-      children
-    );
-  };
-  const renderButton = () => {
-    return /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: classNames(`${classPrefix2}-button`, {
-          [`${classPrefix2}-button-active`]: checkedStatement,
-          [`${classPrefix2}-button-disabled`]: disabled
-        })
-      },
-      children
-    );
-  };
   const color = () => {
     return {
       [`${classPrefix2}-icon-disabled`]: disabled,
@@ -15358,8 +15299,21 @@ const Radio = (props) => {
       className: classNames(color())
     }) : /* @__PURE__ */ React__default.createElement(i$6, { className: classNames(color()) });
   };
+  const renderLabel = () => {
+    const labelcls = classNames(`${classPrefix2}-label`, {
+      [`${classPrefix2}-label-disabled`]: disabled
+    });
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderIcon(), /* @__PURE__ */ React__default.createElement("div", { className: labelcls }, children));
+  };
+  const renderButton = () => {
+    const buttoncls = classNames(`${classPrefix2}-button`, {
+      [`${classPrefix2}-button-active`]: checkedStatement,
+      [`${classPrefix2}-button-disabled`]: disabled
+    });
+    return /* @__PURE__ */ React__default.createElement("div", { className: buttoncls }, children);
+  };
   const renderByShape = (shape2) => {
-    return shape2 === "button" ? renderButton() : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderIcon(), renderLabel());
+    return shape2 === "button" ? renderButton() : renderLabel();
   };
   const renderRadioItem = () => {
     return renderByShape(context && context.shape ? context.shape : shape);
@@ -15368,22 +15322,14 @@ const Radio = (props) => {
     if (disabled || checkedStatement) return;
     setCheckedStatement(!checkedStatement);
   };
-  return /* @__PURE__ */ React__default.createElement(
-    "div",
+  const cls = classNames(
+    classPrefix2,
     {
-      className: classNames(
-        classPrefix2,
-        {
-          [`${classPrefix2}-reverse`]: labelPosition === "left"
-        },
-        className
-      ),
-      style,
-      onClick: handleClick2,
-      ...rest
+      [`${classPrefix2}-reverse`]: labelPosition === "left"
     },
-    renderRadioItem()
+    className
   );
+  return /* @__PURE__ */ React__default.createElement("div", { className: cls, style, onClick: handleClick2, ...rest }, renderRadioItem());
 };
 Radio.displayName = "NutRadio";
 Radio.Group = RadioGroup;
@@ -15405,9 +15351,6 @@ const Range = (props) => {
     button,
     vertical,
     marks,
-    onChange,
-    onStart,
-    onEnd,
     minDescription,
     maxDescription,
     currentDescription,
@@ -15415,7 +15358,10 @@ const Range = (props) => {
     max,
     step,
     value,
-    defaultValue
+    defaultValue,
+    onChange,
+    onStart,
+    onEnd
   } = { ...defaultProps$O, ...props };
   const classPrefix2 = "nut-range";
   const [buttonIndex, setButtonIndex] = useState(0);
@@ -15433,7 +15379,7 @@ const Range = (props) => {
     finalValue: 0,
     onChange: handleChange
   });
-  const [exactValue, setEaxctValue] = useState(
+  const [exactValue, setExactValue] = useState(
     () => value || defaultValue || 0
   );
   const marksRef = useRef({});
@@ -15451,10 +15397,7 @@ const Range = (props) => {
         setMarksList(list);
       }
     }
-  }, [marks]);
-  const scope = () => {
-    return max - min;
-  };
+  }, [marks, max, min]);
   const classes = classNames(classPrefix2, {
     [`${classPrefix2}-disabled`]: disabled,
     [`${classPrefix2}-vertical`]: vertical
@@ -15466,41 +15409,38 @@ const Range = (props) => {
     },
     className
   );
-  const markClassName = useCallback(
-    (mark) => {
-      const classPrefix22 = "nut-range-mark";
-      let lowerBound = min;
-      let upperBound = max;
-      if (range3 && Array.isArray(current)) {
-        lowerBound = current[0];
-        upperBound = current[1];
-      } else {
-        upperBound = current;
-      }
-      const isActive = mark <= upperBound && mark >= lowerBound;
-      return [
-        `${classPrefix22}-text`,
-        `${isActive ? `${classPrefix22}-text-active` : ""}`
-      ].join(" ");
-    },
-    [range3, current, min, max]
-  );
+  const markClassName = (mark) => {
+    const classPrefix22 = "nut-range-mark";
+    let lowerBound = min;
+    let upperBound = max;
+    if (range3 && Array.isArray(current)) {
+      lowerBound = current[0];
+      upperBound = current[1];
+    } else {
+      upperBound = current;
+    }
+    const isActive = mark <= upperBound && mark >= lowerBound;
+    return [
+      `${classPrefix22}-text`,
+      `${isActive ? `${classPrefix22}-text-active` : ""}`
+    ].join(" ");
+  };
   const isRange = (val) => {
     return !!range3 && Array.isArray(val);
   };
+  const scope = useMemo$1(() => {
+    if (max < min || max === min) {
+      console.log("max 的值需要大于 min的值");
+    }
+    return max - min;
+  }, [max, min]);
   const calcMainAxis = () => {
     const modelVal = current;
-    if (isRange(modelVal)) {
-      return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
-    }
-    return `${(modelVal - min) * 100 / scope()}%`;
+    return isRange(modelVal) ? `${(modelVal[1] - modelVal[0]) * 100 / scope}%` : `${(modelVal - min) * 100 / scope}%`;
   };
   const calcOffset = () => {
     const modelVal = current;
-    if (isRange(modelVal)) {
-      return `${(modelVal[0] - min) * 100 / scope()}%`;
-    }
-    return `0%`;
+    return isRange(modelVal) ? `${(modelVal[0] - min) * 100 / scope}%` : `0%`;
   };
   const barStyle = () => {
     if (vertical) {
@@ -15520,11 +15460,11 @@ const Range = (props) => {
   const marksStyle = (mark) => {
     const dir = rtl ? "right" : "left";
     let style = {
-      [dir]: `${(mark - min) / scope() * 100}%`
+      [dir]: `${(mark - min) / scope * 100}%`
     };
     if (vertical) {
       style = {
-        top: `${(mark - min) / scope() * 100}%`
+        top: `${(mark - min) / scope * 100}%`
       };
     }
     return style;
@@ -15571,8 +15511,8 @@ const Range = (props) => {
       delta = event.clientY - rect.top;
       total = rect.height;
     }
-    const value2 = min + delta / total * scope();
-    setEaxctValue(current);
+    const value2 = min + delta / total * scope;
+    setExactValue(current);
     if (isRange(current)) {
       const [left, right] = current;
       const middle = (left + right) / 2;
@@ -15590,7 +15530,7 @@ const Range = (props) => {
       return;
     }
     touch.start(event);
-    setEaxctValue(current);
+    setExactValue(current);
     if (isRange(current)) {
       setStartValue(current.map(format2));
     } else {
@@ -15611,12 +15551,12 @@ const Range = (props) => {
     const rect = getRect(root2.current);
     let delta = touch.deltaX.current;
     let total = rect.width;
-    let diff = delta / total * scope();
+    let diff = delta / total * scope;
     diff = rtl ? -diff : diff;
     if (vertical) {
       delta = touch.deltaY.current;
       total = rect.height;
-      diff = delta / total * scope();
+      diff = delta / total * scope;
     }
     let newValue;
     if (isRange(startValue)) {
@@ -15625,7 +15565,7 @@ const Range = (props) => {
     } else {
       newValue = startValue + diff;
     }
-    setEaxctValue(newValue);
+    setExactValue(newValue);
     updateValue(newValue);
   };
   const onTouchEnd = () => {
@@ -15645,56 +15585,64 @@ const Range = (props) => {
   const renderButton = (index) => {
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, button || /* @__PURE__ */ React__default.createElement("div", { className: "nut-range-button" }, currentDescription !== null && /* @__PURE__ */ React__default.createElement("div", { className: "number" }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
   };
-  return /* @__PURE__ */ React__default.createElement("div", { className: containerClasses }, minDescription !== null && /* @__PURE__ */ React__default.createElement("div", { className: "min" }, minDescription || min), /* @__PURE__ */ React__default.createElement("div", { ref: root2, className: classes, onClick: (e) => click(e) }, marksList.length > 0 && /* @__PURE__ */ React__default.createElement("div", { className: "nut-range-mark" }, marksList.map((mark) => {
-    return /* @__PURE__ */ React__default.createElement(
-      "span",
-      {
-        key: mark,
-        className: markClassName(mark),
-        style: marksStyle(mark)
-      },
-      Array.isArray(marks) ? marksRef.current[mark] : marks[mark],
-      /* @__PURE__ */ React__default.createElement(
-        "span",
+  const renderRangeButton = () => {
+    return [0, 1].map((item, index) => {
+      const cls = `${index === 0 ? "nut-range-button-wrapper-left" : ""}
+                  ${index === 1 ? "nut-range-button-wrapper-right" : ""}`;
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
         {
-          className: classNames("nut-range-tick", {
-            active: tickClass(mark)
-          })
-        }
-      )
-    );
-  })), /* @__PURE__ */ React__default.createElement("div", { className: "nut-range-bar", style: barStyle() }, range3 ? [0, 1].map((item, index) => {
+          key: index,
+          className: cls,
+          onTouchStart: (e) => {
+            setButtonIndex(index);
+            onTouchStart(e);
+          },
+          onTouchMove,
+          onTouchEnd,
+          onTouchCancel: onTouchEnd,
+          onClick: (e) => e.stopPropagation()
+        },
+        renderButton(index)
+      );
+    });
+  };
+  const renderSingleButton = () => {
     return /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        key: index,
-        className: `${index === 0 ? "nut-range-button-wrapper-left" : ""}
-                  ${index === 1 ? "nut-range-button-wrapper-right" : ""}`,
-        onTouchStart: (e) => {
-          if (typeof index === "number") {
-            setButtonIndex(index);
-          }
-          onTouchStart(e);
-        },
-        onTouchMove: (e) => onTouchMove(e),
+        className: "nut-range-button-wrapper",
+        onTouchStart,
+        onTouchMove,
         onTouchEnd,
         onTouchCancel: onTouchEnd,
         onClick: (e) => e.stopPropagation()
       },
-      renderButton(index)
+      renderButton()
     );
-  }) : /* @__PURE__ */ React__default.createElement(
-    "div",
-    {
-      className: "nut-range-button-wrapper",
-      onTouchStart: (e) => onTouchStart(e),
-      onTouchMove: (e) => onTouchMove(e),
-      onTouchEnd,
-      onTouchCancel: onTouchEnd,
-      onClick: (e) => e.stopPropagation()
-    },
-    renderButton()
-  ))), maxDescription !== null && /* @__PURE__ */ React__default.createElement("div", { className: "max" }, maxDescription || max));
+  };
+  const renderMark = () => {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, marksList.length > 0 && /* @__PURE__ */ React__default.createElement("div", { className: "nut-range-mark" }, marksList.map((mark) => {
+      return /* @__PURE__ */ React__default.createElement(
+        "span",
+        {
+          key: mark,
+          className: markClassName(mark),
+          style: marksStyle(mark)
+        },
+        Array.isArray(marks) ? marksRef.current[mark] : marks[mark],
+        /* @__PURE__ */ React__default.createElement(
+          "span",
+          {
+            className: classNames("nut-range-tick", {
+              active: tickClass(mark)
+            })
+          }
+        )
+      );
+    })));
+  };
+  return /* @__PURE__ */ React__default.createElement("div", { className: containerClasses }, minDescription !== null && /* @__PURE__ */ React__default.createElement("div", { className: "min" }, minDescription || min), /* @__PURE__ */ React__default.createElement("div", { ref: root2, className: classes, onClick: (e) => click(e) }, renderMark(), /* @__PURE__ */ React__default.createElement("div", { className: "nut-range-bar", style: barStyle() }, range3 ? renderRangeButton() : renderSingleButton())), maxDescription !== null && /* @__PURE__ */ React__default.createElement("div", { className: "max" }, maxDescription || max));
 };
 Range.displayName = "NutRange";
 const defaultProps$N = {
@@ -15908,7 +15856,7 @@ const defaultProps$M = {
 };
 const SearchBar = (props) => {
   const classPrefix2 = "nut-searchbar";
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const searchRef = useRef(null);
   const {
     value: outerValue,
@@ -16061,7 +16009,7 @@ const defaultProps$L = {
   autoFocus: false
 };
 const InternalShortPassword = (props, ref) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     title,
     description,
@@ -16159,7 +16107,7 @@ const defaultProps$K = {
   unsupported: ""
 };
 const InternalSignature = (props, ref) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     type: type4,
     lineWidth,
@@ -16340,7 +16288,7 @@ const defaultProps$I = {
   autoSize: false
 };
 const TextArea = (props) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     className,
     value,
@@ -16764,7 +16712,7 @@ const defaultProps$G = {
   }
 };
 const InternalUploader = (props, ref) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const fileListRef = useRef([]);
   const {
     children,
@@ -17345,6 +17293,18 @@ const Content = (props) => {
   );
 };
 Content.displayName = "NutContent";
+const defaultDialogProps = {
+  ...ComponentDefaults,
+  overlay: true,
+  overlayStyle: {},
+  overlayClassName: "",
+  onCancel: () => {
+  },
+  onClose: () => {
+  },
+  onOverlayClick: (e) => true,
+  ...defaultOverlayProps
+};
 const DialogWrap = (props) => {
   const {
     visible,
@@ -17356,7 +17316,7 @@ const DialogWrap = (props) => {
     onClose,
     onCancel,
     onOverlayClick
-  } = props;
+  } = mergeProps(defaultDialogProps, props);
   const onHandleClickOverlay = (e) => {
     if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
       const closed = onOverlayClick && onOverlayClick(e);
@@ -17404,7 +17364,7 @@ const defaultProps$E = {
   beforeClose: () => true
 };
 const BaseDialog = (props, ref) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     visible,
     footer,
@@ -17701,7 +17661,7 @@ const defaultProps$B = {
 };
 const classPrefix$d = `nut-infiniteloading`;
 const InfiniteLoading = (props) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     children,
     type: type4,
@@ -18771,7 +18731,7 @@ const defaultProps$x = {
 };
 const PullToRefresh = (p2) => {
   const classPrefix2 = "nut-pulltorefresh";
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const props = {
     ...defaultProps$x,
     ...p2,
@@ -18952,7 +18912,6 @@ const defaultProps$v = {
 };
 const classPrefix$9 = `nut-avatar`;
 const Avatar = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const {
     children,
     size,
@@ -18978,9 +18937,10 @@ const Avatar = (props) => {
   const avatarRef = useRef(null);
   const parent = useContext(AvatarContext);
   const sizeValue = ["large", "normal", "small"];
+  const { propAvatarGroup, avatarGroupRef } = parent;
   const classes = classNames({
-    [`nut-avatar-${((_a = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _a.size) || size || "normal"}`]: true,
-    [`nut-avatar-${((_b = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _b.shape) || shape}`]: true
+    [`nut-avatar-${(propAvatarGroup == null ? void 0 : propAvatarGroup.size) || size || "normal"}`]: true,
+    [`nut-avatar-${(propAvatarGroup == null ? void 0 : propAvatarGroup.shape) || shape}`]: true
   });
   const cls = classNames(classPrefix$9, classes, className);
   const styles = {
@@ -18988,45 +18948,45 @@ const Avatar = (props) => {
     height: sizeValue.indexOf(size) > -1 ? "" : `${size}px`,
     backgroundColor: `${background}`,
     color,
-    marginLeft: avatarIndex !== 1 && ((_c = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _c.gap) ? `${(_d = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _d.gap}px` : "",
-    zIndex: ((_e = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _e.level) === "right" ? `${Math.abs(maxSum - avatarIndex)}` : "",
+    marginLeft: avatarIndex !== 1 && (propAvatarGroup == null ? void 0 : propAvatarGroup.gap) ? `${propAvatarGroup == null ? void 0 : propAvatarGroup.gap}px` : "",
+    zIndex: (propAvatarGroup == null ? void 0 : propAvatarGroup.level) === "right" ? `${Math.abs(maxSum - avatarIndex)}` : "",
     ...style
   };
   const maxStyles = {
-    backgroundColor: `${(_f = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _f.maxBackground}`,
-    color: `${(_g = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _g.maxColor}`
-  };
+    backgroundColor: `${propAvatarGroup == null ? void 0 : propAvatarGroup.maxBackground}`,
+    color: `${propAvatarGroup == null ? void 0 : propAvatarGroup.maxColor}`
+  };
+  const avatarLength = useCallback(
+    (children2) => {
+      var _a, _b;
+      for (let i2 = 0; i2 < children2.length; i2++) {
+        if (children2[i2] && children2[i2].classList && children2[i2].classList[0] === "nut-avatar") {
+          children2[i2].setAttribute("data-index", i2 + 1);
+        }
+      }
+      const index = Number((_b = (_a = avatarRef.current) == null ? void 0 : _a.dataset) == null ? void 0 : _b.index);
+      const maxCount = propAvatarGroup == null ? void 0 : propAvatarGroup.max;
+      setMaxSum(children2.length);
+      setAvatarIndex(index);
+      if (index === children2.length && index !== maxCount && children2.length > maxCount) {
+        setShowMax(true);
+      }
+    },
+    [propAvatarGroup == null ? void 0 : propAvatarGroup.max]
+  );
   useEffect(() => {
-    var _a2;
-    const avatarChildren = (_a2 = parent == null ? void 0 : parent.avatarGroupRef) == null ? void 0 : _a2.current.children;
+    const avatarChildren = avatarGroupRef == null ? void 0 : avatarGroupRef.current.children;
     if (avatarChildren) {
       avatarLength(avatarChildren);
     }
-  }, []);
-  const avatarLength = (children2) => {
-    var _a2, _b2, _c2;
-    for (let i2 = 0; i2 < children2.length; i2++) {
-      if (children2[i2] && children2[i2].classList && children2[i2].classList[0] === "nut-avatar") {
-        children2[i2].setAttribute("data-index", i2 + 1);
-      }
-    }
-    const index = Number((_b2 = (_a2 = avatarRef == null ? void 0 : avatarRef.current) == null ? void 0 : _a2.dataset) == null ? void 0 : _b2.index);
-    const maxCount = (_c2 = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _c2.max;
-    setMaxSum(children2.length);
-    setAvatarIndex(index);
-    if (index === children2.length && index !== maxCount && children2.length > maxCount) {
-      setShowMax(true);
-    }
-  };
+  }, [avatarLength, avatarGroupRef]);
   const errorEvent = () => {
-    if (onError) {
-      onError();
-    }
+    onError && onError();
   };
   const clickAvatar = (e) => {
     onClick && onClick(e);
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (showMax || !((_h = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _h.max) || avatarIndex <= ((_i = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _i.max)) && /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (showMax || !(propAvatarGroup == null ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup == null ? void 0 : propAvatarGroup.max)) && /* @__PURE__ */ React__default.createElement(
     "div",
     {
       className: cls,
@@ -19035,7 +18995,7 @@ const Avatar = (props) => {
       onClick: clickAvatar,
       ref: avatarRef
     },
-    (!((_j = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _j.max) || avatarIndex <= ((_k = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _k.max)) && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, src && /* @__PURE__ */ React__default.createElement(
+    (!(propAvatarGroup == null ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup == null ? void 0 : propAvatarGroup.max)) && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, src && /* @__PURE__ */ React__default.createElement(
       Image$1,
       {
         className: "avatar-img",
@@ -19048,7 +19008,7 @@ const Avatar = (props) => {
       ...icon.props,
       className: `${icon.props.className || ""} icon`
     }) : null, children && /* @__PURE__ */ React__default.createElement("span", { className: "text" }, children), !src && !icon && !children && /* @__PURE__ */ React__default.createElement(i, { className: "icon" })),
-    showMax && /* @__PURE__ */ React__default.createElement("div", { className: "text" }, ((_l = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _l.maxContent) ? (_m = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _m.maxContent : `+ ${avatarIndex - Number(((_n = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _n.max) || 0)}`)
+    showMax && /* @__PURE__ */ React__default.createElement("div", { className: "text" }, (propAvatarGroup == null ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup == null ? void 0 : propAvatarGroup.maxContent : `+ ${avatarIndex - Number((propAvatarGroup == null ? void 0 : propAvatarGroup.max) || 0)}`)
   ));
 };
 Avatar.displayName = "NutAvatar";
@@ -19557,7 +19517,7 @@ const CountUp = (props) => {
     className,
     thousands,
     style,
-    ...reset
+    ...rest
   } = mergeProps(defaultProps$r, props);
   const classPrefix2 = "nut-countup";
   const countupRef = useRef(null);
@@ -19570,7 +19530,7 @@ const CountUp = (props) => {
     return currNumber.split("");
   };
   const numerArr = useMemo$1(getShowNumber, [value, length, thousands]);
-  const setNumberTransform = () => {
+  const setNumberTransform = useCallback(() => {
     if (countupRef.current) {
       const numberItems = countupRef.current.querySelectorAll(
         ".nut-countup-number"
@@ -19588,7 +19548,7 @@ const CountUp = (props) => {
         }
       });
     }
-  };
+  }, [numerArr]);
   const numberEaseStyle = {
     transition: `transform ${duration}s ease-in-out`
   };
@@ -19599,7 +19559,7 @@ const CountUp = (props) => {
     return () => {
       window.clearTimeout(timerRef.current);
     };
-  }, [numerArr]);
+  }, [numerArr, delay, setNumberTransform]);
   return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2} ${className}`, ref: countupRef }, /* @__PURE__ */ React__default.createElement("ul", { className: `${classPrefix2}-list` }, numerArr.map((item, idx) => {
     return /* @__PURE__ */ React__default.createElement(
       "li",
@@ -19660,7 +19620,7 @@ const defaultProps$p = {
   }
 };
 const Audio = (props) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     className,
     src,
@@ -21349,7 +21309,7 @@ const defaultProps$e = {
   ellipse: false
 };
 const Pagination = (props) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     value,
     mode,
@@ -21696,7 +21656,7 @@ const defaultProps$a = {
   showHeader: true
 };
 const Table = (props) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const rtl = useRtl();
   defaultProps$a.noData = locale.noData;
   const {
@@ -21966,7 +21926,7 @@ const defaultProps$8 = {
 };
 const classPrefix$2 = "nut-tour";
 const Tour = (props) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     children,
     className,
@@ -22621,7 +22581,7 @@ const defaultProps$3 = {
   }
 };
 const TimeSelect = (props) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     visible,
     className,
@@ -22846,7 +22806,7 @@ const defaultProps$1 = {
   fontSize: 14
 };
 const WaterMark = (props) => {
-  const { locale } = useConfig$1();
+  const { locale } = useConfig();
   const {
     content,
     fullPage,
@@ -23405,8 +23365,8 @@ export {
   Video,
   VirtualList,
   WaterMark,
-  getDefaultConfig$1 as getDefaultConfig,
+  getDefaultConfig,
   setDefaultConfig,
-  useConfig$1 as useConfig,
+  useConfig,
   useRtl
 };