@nutui/nutui-react 2.6.21 → 2.6.23

package/dist/nutui.react.umd.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.nutui = {}, global2.React, global2.ReactDOM));
 })(this, function(exports2, React, ReactDOM) {
   "use strict";/*!
-* @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.
 */
@@ -653,7 +653,7 @@
       };
       const getStyle = React.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"))) {
@@ -666,7 +666,7 @@
           }
         }
         return style2;
-      }, [color]);
+      }, [color, props.fill]);
       const handleClick2 = (e) => {
         if (!loading && !disabled && onClick) {
           onClick(e);
@@ -1872,7 +1872,7 @@
   };
   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);
@@ -1882,22 +1882,30 @@
       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 = React.createContext(null);
-  const useConfig$1 = () => {
-    return React.useContext(ConfigContext$1) ?? getDefaultConfig$1();
+  const ConfigContext = React.createContext(null);
+  const useConfig = () => {
+    return React.useContext(ConfigContext) ?? getDefaultConfig();
   };
   function convertThemeVarsToCSSVars(themeVars) {
     const cssVars = {};
@@ -1907,7 +1915,7 @@
     return cssVars;
   }
   const useRtl = () => {
-    const { direction } = useConfig$1();
+    const { direction } = useConfig();
     if (direction) {
       return direction === "rtl";
     }
@@ -1918,7 +1926,7 @@
     const mergedConfig = useMemo(
       () => {
         return {
-          ...getDefaultConfig$1(),
+          ...getDefaultConfig(),
           ...config2,
           direction
         };
@@ -1932,7 +1940,7 @@
     const cssVarStyle = React.useMemo(() => {
       return convertThemeVarsToCSSVars(mergedConfig.theme || {});
     }, [mergedConfig.theme]);
-    return /* @__PURE__ */ React.createElement(ConfigContext$1.Provider, { value: mergedConfig }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(ConfigContext.Provider, { value: mergedConfig }, /* @__PURE__ */ React.createElement(
       "div",
       {
         className: classNames(classPrefix$p, className),
@@ -2800,7 +2808,8 @@
         setInnerVisible(false);
       }
     }, [visible]);
-    useLockScroll(nodeRef, !!lockScroll && innerVisible);
+    const shouldLockScroll = !innerVisible ? false : lockScroll;
+    useLockScroll(nodeRef, shouldLockScroll);
     const classes = classNames(classPrefix2, className);
     const styles = {
       ...style
@@ -3354,31 +3363,36 @@
     const [scrollTop, SetScrollTop] = React.useState(0);
     let startTime = 0;
     const scrollEl = React.useRef(null);
-    React.useEffect(() => {
-      init();
-      return () => removeEventListener();
-    }, []);
-    const init = () => {
+    const cls = classNames(classPrefix2, { show: backTop }, className);
+    const scrollListener = React.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 = React.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]);
+    React.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);
@@ -3394,27 +3408,13 @@
         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 ? {
@@ -3425,23 +3425,7 @@
       bottom: "20px",
       zIndex
     };
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: classNames(
-          classPrefix2,
-          {
-            show: backTop
-          },
-          className
-        ),
-        style: styles,
-        onClick: (e) => {
-          goTop(e);
-        }
-      },
-      children || /* @__PURE__ */ React.createElement(s$1, { width: 19, height: 19, className: "nut-backtop-main" })
-    );
+    return /* @__PURE__ */ React.createElement("div", { className: cls, style: styles, onClick: (e) => goTop(e) }, children || /* @__PURE__ */ React.createElement(s$1, { width: 19, height: 19, className: "nut-backtop-main" }));
   };
   BackTop.displayName = "NutBackTop";
   function clamp$2(v, min, max) {
@@ -8479,7 +8463,7 @@
     }
   };
   const FixedNav = (props) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       className,
       overlay,
@@ -8644,11 +8628,10 @@
     };
     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.createElement(React.Fragment, null, fixed && placeholder ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, safeAreaInsetTop && /* @__PURE__ */ React.createElement(SafeArea, { position: "top" }), fixed && placeholder ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
   };
   NavBar.displayName = "NutNavBar";
   const defaultProps$1e = {
@@ -8711,7 +8694,8 @@
     const [innerVisible, setInnerVisible] = React.useState(visible);
     const [showChildren, setShowChildren] = React.useState(true);
     const [transitionName, setTransitionName] = React.useState("");
-    useLockScroll(nodeRef, innerVisible && lockScroll);
+    const shouldLockScroll = !innerVisible ? false : lockScroll;
+    useLockScroll(nodeRef, shouldLockScroll);
     const classPrefix2 = "nut-popup";
     const baseStyle = {
       zIndex: index
@@ -9577,19 +9561,6 @@
       return pathNodes;
     }
   }
-  const defaultConfigRef = {
-    current: {
-      locale: zhCN,
-      direction: "ltr"
-    }
-  };
-  const getDefaultConfig = () => {
-    return defaultConfigRef.current;
-  };
-  const ConfigContext = React.createContext(null);
-  const useConfig = () => {
-    return React.useContext(ConfigContext) ?? getDefaultConfig();
-  };
   const defaultProps$16 = {
     ...ComponentDefaults,
     activeColor: "",
@@ -10006,7 +9977,7 @@
     custom: false
   };
   const ExistRender = (props) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       children,
       type,
@@ -10062,7 +10033,7 @@
     backIcon: null
   };
   const InternalAddress = (props, ref) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       style,
       className,
@@ -10457,7 +10428,7 @@
     }
   };
   const CalendarItem = React.forwardRef((props, ref) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       style,
       className,
@@ -10479,6 +10450,7 @@
       firstDayOfWeek,
       disableDate,
       renderHeaderButtons,
+      renderBottomButton,
       renderDay,
       renderDayTop,
       renderDayBottom,
@@ -11021,7 +10993,7 @@
       );
     };
     const renderFooter = () => {
-      return /* @__PURE__ */ React.createElement("div", { className: "nut-calendar-footer" }, children, /* @__PURE__ */ React.createElement("div", { className: "calendar-confirm-btn", onClick: confirm2 }, confirmText || locale.confirm));
+      return /* @__PURE__ */ React.createElement("div", { className: "nut-calendar-footer" }, children, /* @__PURE__ */ React.createElement("div", { onClick: confirm2 }, renderBottomButton ? renderBottomButton() : /* @__PURE__ */ React.createElement("div", { className: "calendar-confirm-btn" }, confirmText || locale.confirm)));
     };
     return /* @__PURE__ */ React.createElement("div", { className: classes, style }, renderHeader(), renderContent(), popup && !autoBackfill ? renderFooter() : "");
   });
@@ -11059,7 +11031,7 @@
     }
   };
   const Calendar = React.forwardRef((props, ref) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       style,
       className,
@@ -11080,8 +11052,10 @@
       showSubTitle,
       scrollAnimation,
       firstDayOfWeek,
+      closeIcon,
       disableDate,
       renderHeaderButtons,
+      renderBottomButton,
       renderDay,
       renderDayTop,
       renderDayBottom,
@@ -11124,6 +11098,7 @@
           children,
           type,
           autoBackfill,
+          renderBottomButton,
           popup,
           title: title || locale.calendaritem.title,
           defaultValue,
@@ -11156,6 +11131,7 @@
         position: "bottom",
         round: true,
         closeable: true,
+        closeIcon,
         destroyOnClose: true,
         onOverlayClick: closePopup,
         onCloseIconClick: closePopup,
@@ -11276,7 +11252,7 @@
   };
   const prefixCls = "nut-calendarcard";
   const CalendarCard = React.forwardRef((props, ref) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       style,
       className,
@@ -12122,7 +12098,7 @@
     duration: 1e3
   };
   const InternalPicker = (props, ref) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       children,
       visible,
@@ -12418,7 +12394,7 @@
       ...defaultProps$Y,
       ...props
     };
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const lang = locale.datepicker;
     const zhCNType = {
       day: lang.day,
@@ -14225,7 +14201,7 @@
   const Input = React.forwardRef(
     (props, ref) => {
       const rtl = useRtl();
-      const { locale } = useConfig$1();
+      const { locale } = useConfig();
       const {
         type,
         name,
@@ -14697,9 +14673,21 @@
     React.useEffect(() => {
       setShowPopup(show2);
     }, [show2]);
+    const getParentOffset = React.useCallback(() => {
+      setTimeout(() => {
+        const p2 = parent.menuRef.current;
+        if (p2) {
+          const rect = p2.getBoundingClientRect();
+          setPosition({
+            height: rect.height,
+            top: rect.top
+          });
+        }
+      });
+    }, [parent.menuRef]);
     React.useEffect(() => {
       getParentOffset();
-    }, [showPopup]);
+    }, [showPopup, getParentOffset]);
     React.useImperativeHandle(ref, () => ({
       toggle: (s2) => {
         const from = "REF";
@@ -14733,18 +14721,6 @@
     const scrollParent = React.useMemo(() => {
       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
-          });
-        }
-      });
-    };
     React.useEffect(() => {
       if (!parent.lockScroll) {
         scrollParent == null ? void 0 : scrollParent.addEventListener("scroll", getParentOffset, false);
@@ -14752,7 +14728,7 @@
           scrollParent == null ? void 0 : scrollParent.removeEventListener("scroll", getParentOffset, false);
         };
       }
-    }, []);
+    }, [parent.lockScroll, scrollParent, getParentOffset]);
     const getPosition = () => {
       return direction === "down" ? {
         top: `${position.top + position.height}px`,
@@ -14883,24 +14859,29 @@
       ...props
     };
     const menuRef = React.useRef(null);
+    const [showMenuItem, setShowMenuItem] = React.useState([]);
+    const [menuItemTitle, setMenuItemTitle] = React.useState([]);
     const [isScrollFixed, setIsScrollFixed] = React.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 = React.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]);
     React.useEffect(() => {
       if (scrollFixed) {
         window.addEventListener("scroll", onScroll);
       }
       return () => window.removeEventListener("scroll", onScroll);
-    }, []);
-    const [showMenuItem, setShowMenuItem] = React.useState([]);
-    const [menuItemTitle, setMenuItemTitle] = React.useState([]);
+    }, [scrollFixed, onScroll]);
     const toggleMenuItem = (index, from = "NORMAL") => {
       showMenuItem[index] = !showMenuItem[index];
       if (showMenuItem[index]) {
@@ -15004,26 +14985,15 @@
         return null;
       });
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { ...rest, className: cls, ref: menuRef }, /* @__PURE__ */ React.createElement(
       "div",
       {
-        ...rest,
-        className: classNames(`nut-menu`, className, {
-          "scroll-fixed": isScrollFixed
-        }),
-        ref: menuRef
+        className: classNames("nut-menu-bar", {
+          opened: showMenuItem.includes(true)
+        })
       },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: classNames("nut-menu-bar", {
-            opened: showMenuItem.includes(true)
-          })
-        },
-        menuTitle()
-      ),
-      cloneChildren()
-    );
+      menuTitle()
+    ), cloneChildren());
   };
   Menu.displayName = "NutMenu";
   Menu.Item = MenuItem;
@@ -15038,7 +15008,7 @@
     }
   };
   const NumberKeyboard = (props) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       title,
       rightActions,
@@ -15220,6 +15190,13 @@
         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,
@@ -15242,7 +15219,7 @@
             }
           );
         });
-      }, [options2]);
+      }, [options2, labelPosition, val2State]);
       return /* @__PURE__ */ React.createElement(
         RadioContext.Provider,
         {
@@ -15259,20 +15236,7 @@
             }
           }
         },
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: classNames(
-              classPrefix$f,
-              {
-                [`${classPrefix$f}-${props.direction}`]: props.direction
-              },
-              className
-            ),
-            ...rest
-          },
-          (options2 == null ? void 0 : options2.length) ? renderOptionsChildren() : children
-        )
+        /* @__PURE__ */ React.createElement("div", { className: cls, ...rest }, (options2 == null ? void 0 : options2.length) ? renderOptionsChildren() : children)
       );
     }
   );
@@ -15330,29 +15294,6 @@
         }
       };
     }
-    const renderLabel = () => {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: classNames(`${classPrefix2}-label`, {
-            [`${classPrefix2}-label-disabled`]: disabled
-          })
-        },
-        children
-      );
-    };
-    const renderButton = () => {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: classNames(`${classPrefix2}-button`, {
-            [`${classPrefix2}-button-active`]: checkedStatement,
-            [`${classPrefix2}-button-disabled`]: disabled
-          })
-        },
-        children
-      );
-    };
     const color = () => {
       return {
         [`${classPrefix2}-icon-disabled`]: disabled,
@@ -15376,8 +15317,21 @@
         className: classNames(color())
       }) : /* @__PURE__ */ React.createElement(i$6, { className: classNames(color()) });
     };
+    const renderLabel = () => {
+      const labelcls = classNames(`${classPrefix2}-label`, {
+        [`${classPrefix2}-label-disabled`]: disabled
+      });
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), /* @__PURE__ */ React.createElement("div", { className: labelcls }, children));
+    };
+    const renderButton = () => {
+      const buttoncls = classNames(`${classPrefix2}-button`, {
+        [`${classPrefix2}-button-active`]: checkedStatement,
+        [`${classPrefix2}-button-disabled`]: disabled
+      });
+      return /* @__PURE__ */ React.createElement("div", { className: buttoncls }, children);
+    };
     const renderByShape = (shape2) => {
-      return shape2 === "button" ? renderButton() : /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), renderLabel());
+      return shape2 === "button" ? renderButton() : renderLabel();
     };
     const renderRadioItem = () => {
       return renderByShape(context && context.shape ? context.shape : shape);
@@ -15386,22 +15340,14 @@
       if (disabled || checkedStatement) return;
       setCheckedStatement(!checkedStatement);
     };
-    return /* @__PURE__ */ React.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.createElement("div", { className: cls, style, onClick: handleClick2, ...rest }, renderRadioItem());
   };
   Radio.displayName = "NutRadio";
   Radio.Group = RadioGroup;
@@ -15423,9 +15369,6 @@
       button,
       vertical,
       marks,
-      onChange,
-      onStart,
-      onEnd,
       minDescription,
       maxDescription,
       currentDescription,
@@ -15433,7 +15376,10 @@
       max,
       step,
       value,
-      defaultValue
+      defaultValue,
+      onChange,
+      onStart,
+      onEnd
     } = { ...defaultProps$O, ...props };
     const classPrefix2 = "nut-range";
     const [buttonIndex, setButtonIndex] = React.useState(0);
@@ -15451,7 +15397,7 @@
       finalValue: 0,
       onChange: handleChange
     });
-    const [exactValue, setEaxctValue] = React.useState(
+    const [exactValue, setExactValue] = React.useState(
       () => value || defaultValue || 0
     );
     const marksRef = React.useRef({});
@@ -15469,10 +15415,7 @@
           setMarksList(list);
         }
       }
-    }, [marks]);
-    const scope = () => {
-      return max - min;
-    };
+    }, [marks, max, min]);
     const classes = classNames(classPrefix2, {
       [`${classPrefix2}-disabled`]: disabled,
       [`${classPrefix2}-vertical`]: vertical
@@ -15484,41 +15427,38 @@
       },
       className
     );
-    const markClassName = React.useCallback(
-      (mark) => {
-        const classPrefix22 = "nut-range-mark";
-        let lowerBound = min;
-        let upperBound = max;
-        if (range2 && 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(" ");
-      },
-      [range2, current, min, max]
-    );
+    const markClassName = (mark) => {
+      const classPrefix22 = "nut-range-mark";
+      let lowerBound = min;
+      let upperBound = max;
+      if (range2 && 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 !!range2 && Array.isArray(val);
     };
+    const scope = React.useMemo(() => {
+      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) {
@@ -15538,11 +15478,11 @@
     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;
@@ -15589,8 +15529,8 @@
         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;
@@ -15608,7 +15548,7 @@
         return;
       }
       touch.start(event);
-      setEaxctValue(current);
+      setExactValue(current);
       if (isRange(current)) {
         setStartValue(current.map(format2));
       } else {
@@ -15629,12 +15569,12 @@
       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)) {
@@ -15643,7 +15583,7 @@
       } else {
         newValue = startValue + diff;
       }
-      setEaxctValue(newValue);
+      setExactValue(newValue);
       updateValue(newValue);
     };
     const onTouchEnd = () => {
@@ -15663,56 +15603,64 @@
     const renderButton = (index) => {
       return /* @__PURE__ */ React.createElement(React.Fragment, null, button || /* @__PURE__ */ React.createElement("div", { className: "nut-range-button" }, currentDescription !== null && /* @__PURE__ */ React.createElement("div", { className: "number" }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
     };
-    return /* @__PURE__ */ React.createElement("div", { className: containerClasses }, minDescription !== null && /* @__PURE__ */ React.createElement("div", { className: "min" }, minDescription || min), /* @__PURE__ */ React.createElement("div", { ref: root2, className: classes, onClick: (e) => click(e) }, marksList.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "nut-range-mark" }, marksList.map((mark) => {
-      return /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          key: mark,
-          className: markClassName(mark),
-          style: marksStyle(mark)
-        },
-        Array.isArray(marks) ? marksRef.current[mark] : marks[mark],
-        /* @__PURE__ */ React.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.createElement(
+          "div",
           {
-            className: classNames("nut-range-tick", {
-              active: tickClass(mark)
-            })
-          }
-        )
-      );
-    })), /* @__PURE__ */ React.createElement("div", { className: "nut-range-bar", style: barStyle() }, range2 ? [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.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.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.createElement("div", { className: "max" }, maxDescription || max));
+    };
+    const renderMark = () => {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, marksList.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "nut-range-mark" }, marksList.map((mark) => {
+        return /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            key: mark,
+            className: markClassName(mark),
+            style: marksStyle(mark)
+          },
+          Array.isArray(marks) ? marksRef.current[mark] : marks[mark],
+          /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              className: classNames("nut-range-tick", {
+                active: tickClass(mark)
+              })
+            }
+          )
+        );
+      })));
+    };
+    return /* @__PURE__ */ React.createElement("div", { className: containerClasses }, minDescription !== null && /* @__PURE__ */ React.createElement("div", { className: "min" }, minDescription || min), /* @__PURE__ */ React.createElement("div", { ref: root2, className: classes, onClick: (e) => click(e) }, renderMark(), /* @__PURE__ */ React.createElement("div", { className: "nut-range-bar", style: barStyle() }, range2 ? renderRangeButton() : renderSingleButton())), maxDescription !== null && /* @__PURE__ */ React.createElement("div", { className: "max" }, maxDescription || max));
   };
   Range.displayName = "NutRange";
   const defaultProps$N = {
@@ -15926,7 +15874,7 @@
   };
   const SearchBar = (props) => {
     const classPrefix2 = "nut-searchbar";
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const searchRef = React.useRef(null);
     const {
       value: outerValue,
@@ -16079,7 +16027,7 @@
     autoFocus: false
   };
   const InternalShortPassword = (props, ref) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       title,
       description,
@@ -16177,7 +16125,7 @@
     unsupported: ""
   };
   const InternalSignature = (props, ref) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       type,
       lineWidth,
@@ -16358,7 +16306,7 @@
     autoSize: false
   };
   const TextArea = (props) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       className,
       value,
@@ -16782,7 +16730,7 @@
     }
   };
   const InternalUploader = (props, ref) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const fileListRef = React.useRef([]);
     const {
       children,
@@ -17363,6 +17311,18 @@
     );
   };
   Content.displayName = "NutContent";
+  const defaultDialogProps = {
+    ...ComponentDefaults,
+    overlay: true,
+    overlayStyle: {},
+    overlayClassName: "",
+    onCancel: () => {
+    },
+    onClose: () => {
+    },
+    onOverlayClick: (e) => true,
+    ...defaultOverlayProps
+  };
   const DialogWrap = (props) => {
     const {
       visible,
@@ -17374,7 +17334,7 @@
       onClose,
       onCancel,
       onOverlayClick
-    } = props;
+    } = mergeProps(defaultDialogProps, props);
     const onHandleClickOverlay = (e) => {
       if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
         const closed = onOverlayClick && onOverlayClick(e);
@@ -17422,7 +17382,7 @@
     beforeClose: () => true
   };
   const BaseDialog = (props, ref) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       visible,
       footer,
@@ -17719,7 +17679,7 @@
   };
   const classPrefix$d = `nut-infiniteloading`;
   const InfiniteLoading = (props) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       children,
       type,
@@ -18789,7 +18749,7 @@
   };
   const PullToRefresh = (p2) => {
     const classPrefix2 = "nut-pulltorefresh";
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const props = {
       ...defaultProps$x,
       ...p2,
@@ -18970,7 +18930,6 @@
   };
   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,
@@ -18996,9 +18955,10 @@
     const avatarRef = React.useRef(null);
     const parent = React.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 = {
@@ -19006,45 +18966,45 @@
       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 = React.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]
+    );
     React.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.createElement(React.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.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, (showMax || !(propAvatarGroup == null ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup == null ? void 0 : propAvatarGroup.max)) && /* @__PURE__ */ React.createElement(
       "div",
       {
         className: cls,
@@ -19053,7 +19013,7 @@
         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.createElement(React.Fragment, null, src && /* @__PURE__ */ React.createElement(
+      (!(propAvatarGroup == null ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup == null ? void 0 : propAvatarGroup.max)) && /* @__PURE__ */ React.createElement(React.Fragment, null, src && /* @__PURE__ */ React.createElement(
         Image$1,
         {
           className: "avatar-img",
@@ -19066,7 +19026,7 @@
         ...icon.props,
         className: `${icon.props.className || ""} icon`
       }) : null, children && /* @__PURE__ */ React.createElement("span", { className: "text" }, children), !src && !icon && !children && /* @__PURE__ */ React.createElement(i, { className: "icon" })),
-      showMax && /* @__PURE__ */ React.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.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";
@@ -19575,7 +19535,7 @@
       className,
       thousands,
       style,
-      ...reset
+      ...rest
     } = mergeProps(defaultProps$r, props);
     const classPrefix2 = "nut-countup";
     const countupRef = React.useRef(null);
@@ -19588,7 +19548,7 @@
       return currNumber.split("");
     };
     const numerArr = React.useMemo(getShowNumber, [value, length, thousands]);
-    const setNumberTransform = () => {
+    const setNumberTransform = React.useCallback(() => {
       if (countupRef.current) {
         const numberItems = countupRef.current.querySelectorAll(
           ".nut-countup-number"
@@ -19606,7 +19566,7 @@
           }
         });
       }
-    };
+    }, [numerArr]);
     const numberEaseStyle = {
       transition: `transform ${duration}s ease-in-out`
     };
@@ -19617,7 +19577,7 @@
       return () => {
         window.clearTimeout(timerRef.current);
       };
-    }, [numerArr]);
+    }, [numerArr, delay, setNumberTransform]);
     return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className}`, ref: countupRef }, /* @__PURE__ */ React.createElement("ul", { className: `${classPrefix2}-list` }, numerArr.map((item, idx) => {
       return /* @__PURE__ */ React.createElement(
         "li",
@@ -19678,7 +19638,7 @@
     }
   };
   const Audio = (props) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       className,
       src,
@@ -21367,7 +21327,7 @@
     ellipse: false
   };
   const Pagination = (props) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       value,
       mode,
@@ -21714,7 +21674,7 @@
     showHeader: true
   };
   const Table = (props) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const rtl = useRtl();
     defaultProps$a.noData = locale.noData;
     const {
@@ -21984,7 +21944,7 @@
   };
   const classPrefix$2 = "nut-tour";
   const Tour = (props) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       children,
       className,
@@ -22639,7 +22599,7 @@
     }
   };
   const TimeSelect = (props) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       visible,
       className,
@@ -22864,7 +22824,7 @@
     fontSize: 14
   };
   const WaterMark = (props) => {
-    const { locale } = useConfig$1();
+    const { locale } = useConfig();
     const {
       content,
       fullPage,
@@ -23422,9 +23382,9 @@
   exports2.Video = Video;
   exports2.VirtualList = VirtualList;
   exports2.WaterMark = WaterMark;
-  exports2.getDefaultConfig = getDefaultConfig$1;
+  exports2.getDefaultConfig = getDefaultConfig;
   exports2.setDefaultConfig = setDefaultConfig;
-  exports2.useConfig = useConfig$1;
+  exports2.useConfig = useConfig;
   exports2.useRtl = useRtl;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });