@nutui/nutui-react 2.0.21 → 2.0.23-beta.0

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.21 Wed Oct 18 2023 17:52:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.23 Fri Nov 03 2023 19:51:24 GMT+0800 (中国标准时间)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -2456,7 +2456,7 @@ Check the top-level render call using <` + t + ">.");
     style: {}
   };
   const prefixCls$1 = "nut-button";
-  const defaultProps$1s = {
+  const defaultProps$1t = {
     ...ComponentDefaults,
     color: "",
     type: "default",
@@ -2490,7 +2490,7 @@ Check the top-level render call using <` + t + ">.");
         nativeType,
         ...rest
       } = {
-        ...defaultProps$1s,
+        ...defaultProps$1t,
         ...props
       };
       const getStyle = React.useCallback(() => {
@@ -2542,7 +2542,7 @@ Check the top-level render call using <` + t + ">.");
   );
   Button.displayName = "NutButton";
   const CellGroupContext = React.createContext(null);
-  const defaultProps$1r = {
+  const defaultProps$1s = {
     ...ComponentDefaults,
     title: "",
     description: "",
@@ -2551,7 +2551,7 @@ Check the top-level render call using <` + t + ">.");
   const classPrefix$p = "nut-cell-group";
   const CellGroup = (props) => {
     const { children, className, style, title, description, divider, ...rest } = {
-      ...defaultProps$1r,
+      ...defaultProps$1s,
       ...props
     };
     return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix$p, className), ...rest }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$p}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$p}__description` }, description) : null, /* @__PURE__ */ React.createElement(
@@ -2562,9 +2562,9 @@ Check the top-level render call using <` + t + ">.");
       /* @__PURE__ */ React.createElement(CellGroupContext.Provider, { value: { divider } }, children)
     ));
   };
-  CellGroup.defaultProps = defaultProps$1r;
+  CellGroup.defaultProps = defaultProps$1s;
   CellGroup.displayName = "NutCellGroup";
-  const defaultProps$1q = {
+  const defaultProps$1r = {
     ...ComponentDefaults,
     title: null,
     description: null,
@@ -2589,7 +2589,7 @@ Check the top-level render call using <` + t + ">.");
       style,
       ...rest
     } = {
-      ...defaultProps$1q,
+      ...defaultProps$1r,
       ...props
     };
     const handleClick2 = (event) => {
@@ -2622,7 +2622,7 @@ Check the top-level render call using <` + t + ">.");
       (ctx2 == null ? void 0 : ctx2.divider) ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$o}__divider` }) : null
     );
   };
-  Cell.defaultProps = defaultProps$1q;
+  Cell.defaultProps = defaultProps$1r;
   Cell.displayName = "NutCell";
   Cell.Group = CellGroup;
   var INFINITY = 1 / 0;
@@ -3763,7 +3763,7 @@ Check the top-level render call using <` + t + ">.");
   const pxCheck = (value) => {
     return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
   };
-  const defaultProps$1p = {
+  const defaultProps$1q = {
     ...ComponentDefaults,
     fit: "fill",
     position: "center",
@@ -3792,26 +3792,40 @@ Check the top-level render call using <` + t + ">.");
       onClick,
       onLoad,
       onError
-    } = { ...defaultProps$1p, ...props };
-    const [innerLoading, setInnerLoading] = React.useState(true);
+    } = { ...defaultProps$1q, ...props };
+    const [innerLoading, setInnerLoading] = React.useState(false);
     const [isError, setIsError] = React.useState(false);
+    const [complete, setComplete] = React.useState(false);
     const imgRef = React.useRef(null);
     React.useEffect(() => {
-      if (imgRef.current && imgRef.current.complete && imgRef.current.naturalHeight !== 0) {
-        setInnerLoading(false);
-      } else if (src) {
+      if (imgRef.current && imgRef.current.complete) {
+        if (imgRef.current.naturalHeight === 0) {
+          handleError();
+        } else {
+          handleLoad();
+        }
+      } else {
         setInnerLoading(true);
       }
+    }, [imgRef]);
+    React.useEffect(() => {
+      setComplete(false);
     }, [src]);
     const handleLoad = () => {
-      setIsError(false);
-      setInnerLoading(false);
-      onLoad && onLoad();
+      if (!complete) {
+        setIsError(false);
+        setInnerLoading(false);
+        onLoad && onLoad();
+        setComplete(true);
+      }
     };
     const handleError = () => {
-      setIsError(true);
-      setInnerLoading(false);
-      onError && onError();
+      if (!complete) {
+        setIsError(true);
+        setInnerLoading(false);
+        onError && onError();
+        setComplete(true);
+      }
     };
     const containerStyle = {
       height: height ? pxCheck(height) : "",
@@ -3919,7 +3933,7 @@ Check the top-level render call using <` + t + ">.");
       renderErrorImg()
     );
   };
-  Image$1.defaultProps = defaultProps$1p;
+  Image$1.defaultProps = defaultProps$1q;
   Image$1.displayName = "NutImage";
   function _extends$4() {
     _extends$4 = Object.assign ? Object.assign.bind() : function(target) {
@@ -5662,6 +5676,171 @@ Check the top-level render call using <` + t + ">.");
     onExited: propTypesExports.func
   }) : {};
   const CSSTransition$1 = CSSTransition;
+  const MIN_DISTANCE = 10;
+  function getDirection(x2, y2) {
+    if (x2 > y2 && x2 > MIN_DISTANCE) {
+      return "horizontal";
+    }
+    if (y2 > x2 && y2 > MIN_DISTANCE) {
+      return "vertical";
+    }
+    return "";
+  }
+  function useTouch() {
+    const startX = React.useRef(0);
+    const startY = React.useRef(0);
+    const deltaX = React.useRef(0);
+    const deltaY = React.useRef(0);
+    const offsetX = React.useRef(0);
+    const offsetY = React.useRef(0);
+    const direction = React.useRef("");
+    const isVertical = () => direction.current === "vertical";
+    const isHorizontal = () => direction.current === "horizontal";
+    const reset = () => {
+      deltaX.current = 0;
+      deltaY.current = 0;
+      offsetX.current = 0;
+      offsetY.current = 0;
+      direction.current = "";
+    };
+    const start2 = (event) => {
+      reset();
+      startX.current = event.touches[0].clientX;
+      startY.current = event.touches[0].clientY;
+    };
+    const move = (event) => {
+      const touch = event.touches[0];
+      deltaX.current = touch.clientX < 0 ? 0 : touch.clientX - startX.current;
+      deltaY.current = touch.clientY - startY.current;
+      offsetX.current = Math.abs(deltaX.current);
+      offsetY.current = Math.abs(deltaY.current);
+      if (!direction.current) {
+        direction.current = getDirection(offsetX.current, offsetY.current);
+      }
+    };
+    return {
+      move,
+      start: start2,
+      reset,
+      startX,
+      startY,
+      deltaX,
+      deltaY,
+      offsetX,
+      offsetY,
+      direction,
+      isVertical,
+      isHorizontal
+    };
+  }
+  const canUseDom = !!(typeof window !== "undefined" && typeof document !== "undefined" && window.document && window.document.createElement);
+  const defaultRoot = canUseDom ? window : void 0;
+  const overflowStylePatterns = ["scroll", "auto", "overlay"];
+  function isElement(node) {
+    const ELEMENT_NODE_TYPE = 1;
+    return node.nodeType === ELEMENT_NODE_TYPE;
+  }
+  function getScrollParent(el, root2 = defaultRoot) {
+    let node = el;
+    while (node && node !== root2 && isElement(node)) {
+      if (node === document.body) {
+        return root2;
+      }
+      const { overflowY } = window.getComputedStyle(node);
+      if (overflowStylePatterns.includes(overflowY) && node.scrollHeight > node.clientHeight) {
+        return node;
+      }
+      node = node.parentNode;
+    }
+    return root2;
+  }
+  let passiveSupported = false;
+  if (canUseDom) {
+    try {
+      const opts = Object.defineProperty({}, "passive", {
+        get() {
+          passiveSupported = true;
+        }
+      });
+      window.addEventListener("test-passive-supported", null, opts);
+    } catch (e) {
+      console.log(e);
+    }
+  }
+  let totalLockCount = 0;
+  const BODY_LOCK_CLASS = "nut-overflow-hidden";
+  function getScrollableElement(el) {
+    let current = el == null ? void 0 : el.parentElement;
+    while (current) {
+      if (current.clientHeight < current.scrollHeight) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+  function useLockScroll(rootRef, shouldLock) {
+    const touch = useTouch();
+    const onTouchMove = (event) => {
+      touch.move(event);
+      const direction = touch.deltaY.current > 0 ? "10" : "01";
+      const el = getScrollParent(
+        event.target,
+        rootRef.current
+      );
+      if (!el)
+        return;
+      if (shouldLock === "strict") {
+        const scrollableParent = getScrollableElement(event.target);
+        if (scrollableParent === document.body || scrollableParent === document.documentElement) {
+          event.preventDefault();
+          return;
+        }
+      }
+      const { scrollHeight, offsetHeight, scrollTop } = el;
+      let status = "11";
+      if (scrollTop === 0) {
+        status = offsetHeight >= scrollHeight ? "00" : "01";
+      } else if (scrollTop + offsetHeight >= scrollHeight) {
+        status = "10";
+      }
+      if (status !== "11" && touch.isVertical() && !(parseInt(status, 2) & parseInt(direction, 2))) {
+        if (event.cancelable) {
+          event.preventDefault();
+        }
+      }
+    };
+    const lock = () => {
+      document.addEventListener("touchstart", touch.start);
+      document.addEventListener(
+        "touchmove",
+        onTouchMove,
+        passiveSupported ? { passive: false } : false
+      );
+      if (!totalLockCount) {
+        document.body.classList.add(BODY_LOCK_CLASS);
+      }
+      totalLockCount++;
+    };
+    const unlock = () => {
+      if (totalLockCount) {
+        document.removeEventListener("touchstart", touch.start);
+        document.removeEventListener("touchmove", onTouchMove);
+        totalLockCount--;
+        if (!totalLockCount) {
+          document.body.classList.remove(BODY_LOCK_CLASS);
+        }
+      }
+    };
+    React.useEffect(() => {
+      if (shouldLock) {
+        lock();
+        return () => {
+          unlock();
+        };
+      }
+    }, [shouldLock]);
+  }
   const defaultOverlayProps = {
     ...ComponentDefaults,
     zIndex: 1e3,
@@ -5699,24 +5878,12 @@ Check the top-level render call using <` + t + ">.");
       } else {
         setInnerVisible(false);
       }
-      lock();
     }, [visible]);
-    React.useEffect(() => {
-      return () => {
-        document.body.classList.remove("nut-overflow-hidden");
-      };
-    }, []);
+    useLockScroll(nodeRef, !!props.lockScroll && innerVisible);
     const classes = classNames(className, classPrefix2);
     const styles = {
       ...style
     };
-    const lock = () => {
-      if (lockScroll && visible) {
-        document.body.classList.add("nut-overflow-hidden");
-      } else {
-        document.body.classList.remove("nut-overflow-hidden");
-      }
-    };
     const handleClick2 = (e) => {
       if (closeOnOverlayClick) {
         onClick && onClick(e);
@@ -5755,7 +5922,7 @@ Check the top-level render call using <` + t + ">.");
   Overlay.defaultProps = defaultOverlayProps;
   Overlay.displayName = "NutOverlay";
   const DataContext$2 = React.createContext({});
-  const defaultProps$1o = {
+  const defaultProps$1p = {
     ...ComponentDefaults,
     span: "24",
     offset: "0",
@@ -5763,7 +5930,7 @@ Check the top-level render call using <` + t + ">.");
   };
   const Col = (props) => {
     const { className, style, span, offset, children, onClick } = {
-      ...defaultProps$1o,
+      ...defaultProps$1p,
       ...props
     };
     const [colName, setColName] = React.useState("");
@@ -5795,9 +5962,9 @@ Check the top-level render call using <` + t + ">.");
       children
     );
   };
-  Col.defaultProps = defaultProps$1o;
+  Col.defaultProps = defaultProps$1p;
   Col.displayName = "NutCol";
-  const defaultProps$1n = {
+  const defaultProps$1o = {
     ...ComponentDefaults,
     contentPosition: "center",
     direction: "horizontal"
@@ -5805,7 +5972,7 @@ Check the top-level render call using <` + t + ">.");
   const classPrefix$l = `nut-divider`;
   const Divider = (props) => {
     const { children, contentPosition, style, className, direction, ...rest } = {
-      ...defaultProps$1n,
+      ...defaultProps$1o,
       ...props
     };
     const classes = direction === "horizontal" ? classNames({
@@ -5820,14 +5987,14 @@ Check the top-level render call using <` + t + ">.");
     });
     return /* @__PURE__ */ React.createElement("div", { className: `${classes} ${className || ""}`, style, ...rest }, children);
   };
-  Divider.defaultProps = defaultProps$1n;
+  Divider.defaultProps = defaultProps$1o;
   Divider.displayName = "NutDivider";
   const gridContext = {
     onClick: (item, index) => {
     }
   };
   const GridContext = React.createContext(gridContext);
-  const defaultProps$1m = {
+  const defaultProps$1n = {
     text: "",
     columns: 4,
     gap: 0,
@@ -5853,7 +6020,7 @@ Check the top-level render call using <` + t + ">.");
       onClick,
       ...rest
     } = {
-      ...defaultProps$1m,
+      ...defaultProps$1n,
       ...props
     };
     const classPrefix2 = "nut-grid-item";
@@ -5911,9 +6078,9 @@ Check the top-level render call using <` + t + ">.");
       /* @__PURE__ */ React.createElement("div", { className: contentClass() }, children && /* @__PURE__ */ React.createElement(React.Fragment, null, children), text && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__text` }, text))
     );
   };
-  GridItem.defaultProps = defaultProps$1m;
+  GridItem.defaultProps = defaultProps$1n;
   GridItem.displayName = "NutGridItem";
-  const defaultProps$1l = {
+  const defaultProps$1m = {
     columns: 4,
     gap: 0,
     center: true,
@@ -5934,7 +6101,7 @@ Check the top-level render call using <` + t + ">.");
       className,
       onClick,
       ...rest
-    } = { ...defaultProps$1l, ...props };
+    } = { ...defaultProps$1m, ...props };
     const childrenDom = React.Children.toArray(children);
     const classPrefix2 = "nut-grid";
     const rootClass = () => {
@@ -5964,18 +6131,18 @@ Check the top-level render call using <` + t + ">.");
       });
     })));
   };
-  Grid.defaultProps = defaultProps$1l;
+  Grid.defaultProps = defaultProps$1m;
   Grid.displayName = "NutGrid";
   Grid.Item = GridItem;
-  const defaultProps$1k = {};
+  const defaultProps$1l = {};
   const Layout = (props) => {
-    ({ ...defaultProps$1k, ...props });
+    ({ ...defaultProps$1l, ...props });
     return /* @__PURE__ */ React.createElement("div", { className: "nut-layout" }, "Layout");
   };
-  Layout.defaultProps = defaultProps$1k;
+  Layout.defaultProps = defaultProps$1l;
   Layout.displayName = "NutLayout";
   const classPrefix$k = "nut-row";
-  const defaultProps$1j = {
+  const defaultProps$1k = {
     ...ComponentDefaults,
     type: "",
     justify: "start",
@@ -5995,7 +6162,7 @@ Check the top-level render call using <` + t + ">.");
       gutter,
       onClick
     } = {
-      ...defaultProps$1j,
+      ...defaultProps$1k,
       ...props
     };
     const getClass = (prefix2, type22) => {
@@ -6027,15 +6194,15 @@ Check the top-level render call using <` + t + ">.");
       children
     ));
   };
-  Row.defaultProps = defaultProps$1j;
+  Row.defaultProps = defaultProps$1k;
   Row.displayName = "NutRow";
   const prefixCls = "nut-space";
-  const defaultProps$1i = {
+  const defaultProps$1j = {
     direction: "horizontal"
   };
   const Space = (props) => {
     const { className, style, children, wrap, align, direction, justify } = {
-      ...defaultProps$1i,
+      ...defaultProps$1j,
       ...props
     };
     const cls = classNames(
@@ -6050,29 +6217,8 @@ Check the top-level render call using <` + t + ">.");
       return child !== null && child !== void 0 && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-item` }, child);
     }));
   };
-  Space.defaultProps = defaultProps$1i;
+  Space.defaultProps = defaultProps$1j;
   Space.displayName = "NutSpace";
-  const canUseDom = !!(typeof window !== "undefined" && typeof document !== "undefined" && window.document && window.document.createElement);
-  const defaultRoot = canUseDom ? window : void 0;
-  const overflowStylePatterns = ["scroll", "auto", "overlay"];
-  function isElement(node) {
-    const ELEMENT_NODE_TYPE = 1;
-    return node.nodeType === ELEMENT_NODE_TYPE;
-  }
-  function getScrollParent(el, root2 = defaultRoot) {
-    let node = el;
-    while (node && node !== root2 && isElement(node)) {
-      if (node === document.body) {
-        return root2;
-      }
-      const { overflowY } = window.getComputedStyle(node);
-      if (overflowStylePatterns.includes(overflowY) && node.scrollHeight > node.clientHeight) {
-        return node;
-      }
-      node = node.parentNode;
-    }
-    return root2;
-  }
   function isWindow(val) {
     return val === window;
   }
@@ -6125,7 +6271,7 @@ Check the top-level render call using <` + t + ">.");
       stop2.current = true;
     };
   }
-  const defaultProps$1h = {
+  const defaultProps$1i = {
     ...ComponentDefaults,
     position: "top",
     threshold: 0,
@@ -6143,7 +6289,7 @@ Check the top-level render call using <` + t + ">.");
       threshold,
       onChange,
       ...rest
-    } = { ...defaultProps$1h, ...props };
+    } = { ...defaultProps$1i, ...props };
     const stickyRef = React.useRef(null);
     const rootRef = React.useRef(null);
     const [isFixed, setIsFixed] = React.useState(false);
@@ -6259,9 +6405,9 @@ Check the top-level render call using <` + t + ">.");
       /* @__PURE__ */ React.createElement("div", { className: "nut-sticky--box", ref: stickyRef, style: stickyStyle }, children)
     );
   };
-  Sticky.defaultProps = defaultProps$1h;
+  Sticky.defaultProps = defaultProps$1i;
   Sticky.displayName = "NutSticky";
-  const defaultProps$1g = {
+  const defaultProps$1h = {
     ...ComponentDefaults,
     target: "",
     threshold: 200,
@@ -6279,7 +6425,7 @@ Check the top-level render call using <` + t + ">.");
       style,
       onClick
     } = {
-      ...defaultProps$1g,
+      ...defaultProps$1h,
       ...props
     };
     const classPrefix2 = "nut-backtop";
@@ -6377,7 +6523,7 @@ Check the top-level render call using <` + t + ">.");
       children || /* @__PURE__ */ React.createElement(y$2, { width: 19, height: 19, className: "nut-backtop-main" })
     );
   };
-  BackTop.defaultProps = defaultProps$1g;
+  BackTop.defaultProps = defaultProps$1h;
   BackTop.displayName = "NutBackTop";
   function clamp$1(v, min, max) {
     return Math.max(min, Math.min(v, max));
@@ -11495,7 +11641,7 @@ Please add \`${key}Action\` when creating your handler.`);
   });
   const animated = host.animated;
   const elevatorContext = React.createContext({});
-  const defaultProps$1f = {
+  const defaultProps$1g = {
     ...ComponentDefaults,
     height: "200px",
     floorKey: "title",
@@ -11521,7 +11667,7 @@ Please add \`${key}Action\` when creating your handler.`);
       children,
       ...rest
     } = {
-      ...defaultProps$1f,
+      ...defaultProps$1g,
       ...props
     };
     const classPrefix2 = "nut-elevator";
@@ -11696,10 +11842,10 @@ Please add \`${key}Action\` when creating your handler.`);
       })
     ))) : null);
   };
-  Elevator.defaultProps = defaultProps$1f;
+  Elevator.defaultProps = defaultProps$1g;
   Elevator.displayName = "NutElevator";
   Elevator.Context = elevatorContext;
-  const defaultProps$1e = {
+  const defaultProps$1f = {
     ...ComponentDefaults,
     activeText: "",
     inactiveText: "",
@@ -11727,7 +11873,7 @@ Please add \`${key}Action\` when creating your handler.`);
       content,
       ...rest
     } = {
-      ...defaultProps$1e,
+      ...defaultProps$1f,
       ...props
     };
     const classPrefix2 = "nut-fixednav";
@@ -11779,9 +11925,9 @@ Please add \`${key}Action\` when creating your handler.`);
       /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__btn`, onClick: () => onUpdateValue() }, content || /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(y$7, { color: "#fff" }), /* @__PURE__ */ React.createElement("div", { className: "text" }, visible ? activeText || locale.fixednav.activeText : inactiveText || locale.fixednav.inactiveText)))
     );
   };
-  FixedNav.defaultProps = defaultProps$1e;
+  FixedNav.defaultProps = defaultProps$1f;
   FixedNav.displayName = "NutFixedNav";
-  const defaultProps$1d = {
+  const defaultProps$1e = {
     ...ComponentDefaults,
     left: "",
     right: "",
@@ -11804,7 +11950,7 @@ Please add \`${key}Action\` when creating your handler.`);
       zIndex,
       onBackClick
     } = {
-      ...defaultProps$1d,
+      ...defaultProps$1e,
       ...props
     };
     const classPrefix2 = "nut-navbar";
@@ -11841,9 +11987,9 @@ Please add \`${key}Action\` when creating your handler.`);
     const cls = classNames(classPrefix2, classes, className);
     return /* @__PURE__ */ React.createElement(React.Fragment, null, fixed && placeholder ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}--placeholder` }, renderWrapper()) : renderWrapper());
   };
-  NavBar.defaultProps = defaultProps$1d;
+  NavBar.defaultProps = defaultProps$1e;
   NavBar.displayName = "NutNavBar";
-  const defaultProps$1c = {
+  const defaultProps$1d = {
     ...ComponentDefaults,
     position: "center",
     transition: "",
@@ -11864,7 +12010,7 @@ Please add \`${key}Action\` when creating your handler.`);
     onCloseIconClick: (e) => true,
     ...defaultOverlayProps
   };
-  let _zIndex = 1100;
+  const _zIndex = 1100;
   const Popup = (props) => {
     const {
       children,
@@ -11895,12 +12041,14 @@ Please add \`${key}Action\` when creating your handler.`);
       afterShow,
       afterClose,
       onClick
-    } = { ...defaultProps$1c, ...props };
+    } = { ...defaultProps$1d, ...props };
     const nodeRef = React.useRef(null);
-    const [index, setIndex] = React.useState(zIndex || _zIndex);
+    let innerIndex = zIndex || _zIndex;
+    const [index, setIndex] = React.useState(innerIndex);
     const [innerVisible, setInnerVisible] = React.useState(visible);
     const [showChildren, setShowChildren] = React.useState(true);
     const [transitionName, setTransitionName] = React.useState("");
+    useLockScroll(nodeRef, innerVisible && lockScroll);
     const classPrefix2 = "nut-popup";
     const baseStyle = {
       zIndex: index
@@ -11926,7 +12074,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const open = () => {
       if (!innerVisible) {
         setInnerVisible(true);
-        setIndex(++_zIndex);
+        setIndex(++innerIndex);
       }
       if (destroyOnClose) {
         setShowChildren(true);
@@ -12018,7 +12166,6 @@ Please add \`${key}Action\` when creating your handler.`);
           className: overlayClassName,
           visible: innerVisible,
           closeOnOverlayClick,
-          zIndex,
           lockScroll,
           duration,
           onClick: onHandleClickOverlay
@@ -12034,7 +12181,7 @@ Please add \`${key}Action\` when creating your handler.`);
     }, [position, transition]);
     return /* @__PURE__ */ React.createElement(React.Fragment, null, renderToContainer(portal, renderNode()));
   };
-  Popup.defaultProps = defaultProps$1c;
+  Popup.defaultProps = defaultProps$1d;
   Popup.displayName = "NutPopup";
   const handleClick = (e) => {
     e.stopPropagation();
@@ -12050,7 +12197,7 @@ Please add \`${key}Action\` when creating your handler.`);
     }
   };
   const OffsetContext = React.createContext(20);
-  const defaultProps$1b = {
+  const defaultProps$1c = {
     ...ComponentDefaults,
     position: "left",
     width: "80%"
@@ -12067,7 +12214,7 @@ Please add \`${key}Action\` when creating your handler.`);
       onClose,
       ...rest
     } = {
-      ...defaultProps$1b,
+      ...defaultProps$1c,
       ...props
     };
     const indent = props.indent ? Number(props.indent) : 20;
@@ -12099,7 +12246,7 @@ Please add \`${key}Action\` when creating your handler.`);
       )))
     );
   };
-  SideNavBar.defaultProps = defaultProps$1b;
+  SideNavBar.defaultProps = defaultProps$1c;
   SideNavBar.displayName = "NutSideNavBar";
   const SideNavBarItem = (props) => {
     const classPrefix2 = "nut-subsidenavbar";
@@ -12118,13 +12265,13 @@ Please add \`${key}Action\` when creating your handler.`);
       title
     );
   };
-  const defaultProps$1a = {
+  const defaultProps$1b = {
     open: true
   };
   const SubSideNavBar = (props) => {
     const classPrefix2 = "nut-subsidenavbar";
     const { title, value, children, onClick, open, ...rest } = {
-      ...defaultProps$1a,
+      ...defaultProps$1b,
       ...props
     };
     const offset = React.useContext(OffsetContext);
@@ -12189,19 +12336,19 @@ Please add \`${key}Action\` when creating your handler.`);
       stateRef.current = value;
     }
     const setState = React.useCallback(
-      (v) => {
+      (v, forceTrigger = false) => {
         const prevState = stateRef.current;
         stateRef.current = v;
-        if (prevState !== stateRef.current) {
+        if (prevState !== stateRef.current || forceTrigger) {
           forceUpdate();
+          onChange == null ? void 0 : onChange(v);
         }
-        onChange == null ? void 0 : onChange(v);
       },
       [value, onChange]
     );
     return [stateRef.current, setState];
   }
-  const defaultProps$19 = {
+  const defaultProps$1a = {
     ...ComponentDefaults,
     value: "",
     dot: false,
@@ -12212,7 +12359,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   const Badge = (props) => {
     const { className, style, value, max, children, dot, top, right, color } = {
-      ...defaultProps$19,
+      ...defaultProps$1a,
       ...props
     };
     const classPrefix2 = "nut-badge";
@@ -12239,9 +12386,9 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     return /* @__PURE__ */ React.createElement("div", { className: classes, style }, typeof value === "object" && value && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__icon` }, value), /* @__PURE__ */ React.createElement("div", null, children), /* @__PURE__ */ React.createElement("div", { className: contentClasses, style: getStyle() }, content()));
   };
-  Badge.defaultProps = defaultProps$19;
+  Badge.defaultProps = defaultProps$1a;
   Badge.displayName = "NutBadge";
-  const defaultProps$18 = {
+  const defaultProps$19 = {
     ...ComponentDefaults,
     title: "",
     icon: null,
@@ -12271,7 +12418,7 @@ Please add \`${key}Action\` when creating your handler.`);
       handleClick: handleClick2,
       ...rest
     } = {
-      ...defaultProps$18,
+      ...defaultProps$19,
       ...props
     };
     const classPrefix2 = "nut-tabbar-item";
@@ -12304,7 +12451,7 @@ Please add \`${key}Action\` when creating your handler.`);
       icon ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Badge, { ...badgeProps }, /* @__PURE__ */ React.createElement("div", { className: boxPrefix }, icon)), /* @__PURE__ */ React.createElement("div", { className: titleClass }, title)) : /* @__PURE__ */ React.createElement(Badge, { ...badgeProps }, /* @__PURE__ */ React.createElement("div", { className: titleClass }, title))
     );
   };
-  const defaultProps$17 = {
+  const defaultProps$18 = {
     ...ComponentDefaults,
     defaultValue: 0,
     fixed: false,
@@ -12327,7 +12474,7 @@ Please add \`${key}Action\` when creating your handler.`);
       style,
       onSwitch
     } = {
-      ...defaultProps$17,
+      ...defaultProps$18,
       ...props
     };
     const classPrefix2 = "nut-tabbar";
@@ -12362,17 +12509,17 @@ Please add \`${key}Action\` when creating your handler.`);
       (fixed || safeArea) && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__safe-area` })
     );
   };
-  Tabbar.defaultProps = defaultProps$17;
+  Tabbar.defaultProps = defaultProps$18;
   Tabbar.displayName = "NutTabbar";
   Tabbar.Item = TabbarItem;
-  const defaultProps$16 = {
+  const defaultProps$17 = {
     title: "",
     value: "",
     disabled: false
   };
   const TabPane = (props) => {
     const { children, autoHeightClassName, className, disabled } = {
-      ...defaultProps$16,
+      ...defaultProps$17,
       ...props
     };
     const classPrefix2 = "nut-tabpane";
@@ -12398,7 +12545,7 @@ Please add \`${key}Action\` when creating your handler.`);
     };
   }
   const requestAniFrame$1 = requestAniFrame();
-  const defaultProps$15 = {
+  const defaultProps$16 = {
     ...ComponentDefaults,
     tabStyle: {},
     activeColor: "",
@@ -12424,7 +12571,7 @@ Please add \`${key}Action\` when creating your handler.`);
       autoHeight,
       ...rest
     } = {
-      ...defaultProps$15,
+      ...defaultProps$16,
       ...props
     };
     const [value, setValue] = usePropsValue({
@@ -12591,7 +12738,7 @@ Please add \`${key}Action\` when creating your handler.`);
       return React.cloneElement(child, childProps);
     }))));
   };
-  Tabs.defaultProps = defaultProps$15;
+  Tabs.defaultProps = defaultProps$16;
   Tabs.displayName = "NutTabs";
   Tabs.TabPane = TabPane;
   const formatTree = (tree, parent, config2) => tree.map((node) => {
@@ -12731,7 +12878,7 @@ Please add \`${key}Action\` when creating your handler.`);
     }
   }
   const Tree$1 = Tree;
-  const defaultProps$14 = {
+  const defaultProps$15 = {
     ...ComponentDefaults,
     activeColor: "",
     activeIcon: "checklist",
@@ -12775,7 +12922,7 @@ Please add \`${key}Action\` when creating your handler.`);
       onClose,
       onChange,
       onPathChange
-    } = { ...defaultProps$14, ...props };
+    } = { ...defaultProps$15, ...props };
     const [tabvalue, setTabvalue] = React.useState("c1");
     const [optionsData, setOptionsData] = React.useState([]);
     const isLazy = () => state.configs.lazy && Boolean(state.configs.onLoad);
@@ -13072,9 +13219,9 @@ Please add \`${key}Action\` when creating your handler.`);
     ) : renderTabs());
   };
   const Cascader = React.forwardRef(InternalCascader);
-  Cascader.defaultProps = defaultProps$14;
+  Cascader.defaultProps = defaultProps$15;
   Cascader.displayName = "NutCascader";
-  const defaultProps$13 = {
+  const defaultProps$14 = {
     ...ComponentDefaults,
     visible: false,
     type: "custom",
@@ -13101,7 +13248,7 @@ Please add \`${key}Action\` when creating your handler.`);
       onPathChange,
       ...rest
     } = {
-      ...defaultProps$13,
+      ...defaultProps$14,
       ...props
     };
     return /* @__PURE__ */ React.createElement(React.Fragment, null, type2 === "custom" && /* @__PURE__ */ React.createElement(
@@ -13126,7 +13273,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     ));
   };
-  const defaultProps$12 = {
+  const defaultProps$13 = {
     type: "custom",
     existList: [],
     defaultIcon: null,
@@ -13145,7 +13292,7 @@ Please add \`${key}Action\` when creating your handler.`);
       onSelect,
       onSwitch,
       ...rest
-    } = { ...defaultProps$12, ...props };
+    } = { ...defaultProps$13, ...props };
     const classPrefix2 = "nut-address";
     const selectedExist = (item) => {
       existList.forEach((list, index) => {
@@ -13170,7 +13317,7 @@ Please add \`${key}Action\` when creating your handler.`);
       );
     })), (custom || custom && locale.address.chooseAnotherAddress) && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer`, onClick }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-footer-btn` }, custom)));
   };
-  const defaultProps$11 = {
+  const defaultProps$12 = {
     ...ComponentDefaults,
     defaultValue: [],
     type: "custom",
@@ -13212,7 +13359,7 @@ Please add \`${key}Action\` when creating your handler.`);
       className,
       ...rest
     } = {
-      ...defaultProps$11,
+      ...defaultProps$12,
       ...props
     };
     const classPrefix2 = "nut-address";
@@ -13303,7 +13450,7 @@ Please add \`${key}Action\` when creating your handler.`);
     ));
   };
   const Address = React.forwardRef(InternalAddress);
-  Address.defaultProps = defaultProps$11;
+  Address.defaultProps = defaultProps$12;
   Address.displayName = "NutAddress";
   const Utils = {
     /**
@@ -13553,7 +13700,7 @@ Please add \`${key}Action\` when creating your handler.`);
   const isStartAndEnd = (days) => {
     return days.length >= 2 && Utils.isEqual(days[0], days[1]);
   };
-  const defaultProps$10 = {
+  const defaultProps$11 = {
     ...ComponentDefaults,
     type: "single",
     autoBackfill: false,
@@ -13613,7 +13760,7 @@ Please add \`${key}Action\` when creating your handler.`);
       onUpdate,
       onDayClick,
       onPageChange
-    } = { ...defaultProps$10, ...props };
+    } = { ...defaultProps$11, ...props };
     const weekdays = locale.calendaritem.weekdays;
     const weeks = [
       ...weekdays.slice(firstDayOfWeek, 7),
@@ -13947,6 +14094,8 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       const scrollTop = e.target.scrollTop;
       let current = Math.floor(scrollTop / avgHeight);
+      if (!monthsData[current + 1])
+        return;
       const nextTop = monthsData[current + 1].scrollTop;
       const nextHeight = monthsData[current + 1].cssHeight;
       if (current === 0) {
@@ -14147,9 +14296,9 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes, style }, renderHeader(), renderContent(), popup && !autoBackfill ? renderFooter() : ""));
   });
-  CalendarItem.defaultProps = defaultProps$10;
+  CalendarItem.defaultProps = defaultProps$11;
   CalendarItem.displayName = "NutCalendarItem";
-  const defaultProps$$ = {
+  const defaultProps$10 = {
     ...ComponentDefaults,
     type: "single",
     autoBackfill: false,
@@ -14212,7 +14361,7 @@ Please add \`${key}Action\` when creating your handler.`);
       onConfirm,
       onDayClick,
       onPageChange
-    } = { ...defaultProps$$, ...props };
+    } = { ...defaultProps$10, ...props };
     const calendarRef = React.useRef(null);
     const close = () => {
       onClose && onClose();
@@ -14286,8 +14435,418 @@ Please add \`${key}Action\` when creating your handler.`);
       renderItem()
     ) : renderItem());
   });
-  Calendar.defaultProps = defaultProps$$;
+  Calendar.defaultProps = defaultProps$10;
   Calendar.displayName = "NutCalendar";
+  const Left = () => {
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18"
+      },
+      /* @__PURE__ */ React.createElement("path", { d: "M6.605 9.49a.771.771 0 0 1 0-.98l3.6-4.372a.771.771 0 0 1 1.19.981L8.2 9l3.197 3.881a.771.771 0 1 1-1.191.98l-3.6-4.37Z" })
+    );
+  };
+  const Right = () => {
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18"
+      },
+      /* @__PURE__ */ React.createElement("path", { d: "M11.396 9.49a.771.771 0 0 0 0-.98l-3.6-4.372a.771.771 0 0 0-1.191.981L9.8 9l-3.196 3.881a.771.771 0 0 0 1.19.98l3.6-4.37Z" })
+    );
+  };
+  const DoubleLeft = () => {
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18"
+      },
+      /* @__PURE__ */ React.createElement("path", { d: "M13.853 4.026a.771.771 0 0 1 .12 1.085L10.864 9l3.11 3.889a.771.771 0 1 1-1.204.963L9.272 9.482a.771.771 0 0 1 0-.964l3.497-4.371a.771.771 0 0 1 1.084-.12Zm-5.245 0a.771.771 0 0 1 .12 1.085L5.617 9l3.111 3.889a.771.771 0 0 1-1.205.963L4.026 9.482a.771.771 0 0 1 0-.964l3.497-4.371a.771.771 0 0 1 1.085-.12Z" })
+    );
+  };
+  const DoubleRight = () => {
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18"
+      },
+      /* @__PURE__ */ React.createElement("path", { d: "M4.147 13.974a.771.771 0 0 1-.12-1.085L7.136 9 4.028 5.11a.771.771 0 1 1 1.204-.963l3.497 4.371a.771.771 0 0 1 0 .964l-3.497 4.371a.771.771 0 0 1-1.084.12Zm5.245 0a.771.771 0 0 1-.12-1.085L12.383 9 9.272 5.11a.771.771 0 1 1 1.205-.963l3.497 4.371a.771.771 0 0 1 0 .964l-3.497 4.371a.771.771 0 0 1-1.085.12Z" })
+    );
+  };
+  const convertDateToDay = (date2) => {
+    return date2 ? {
+      year: date2.getFullYear(),
+      month: date2.getMonth() + 1,
+      date: date2.getDate()
+    } : null;
+  };
+  const convertDayToDate = (day) => {
+    return day ? new Date(day.year, day.month - 1, day.date) : null;
+  };
+  const getPrevMonthDays = (year, month, firstDayOfWeek) => {
+    let prevMonth = month - 1;
+    let prevYear = year;
+    if (prevMonth <= 0) {
+      prevMonth = 12;
+      prevYear -= 1;
+    }
+    let days = Utils.getMonthPreDay(year, month);
+    days -= firstDayOfWeek;
+    if (days >= 7) {
+      days -= 7;
+    }
+    const preDates = Utils.getMonthDays(`${prevYear}`, `${prevMonth}`);
+    const months = Array.from(Array(preDates), (_, k2) => {
+      return {
+        type: "prev",
+        year: prevYear,
+        month: prevMonth,
+        date: k2 + 1
+      };
+    });
+    return months.slice(preDates - days);
+  };
+  const getCurrentMonthDays = (year, month) => {
+    const days = Utils.getMonthDays(`${year}`, `${month}`);
+    return Array.from(Array(days), (_, k2) => {
+      return {
+        type: "current",
+        year,
+        month,
+        date: k2 + 1
+      };
+    });
+  };
+  const getCurrentWeekDays = (day, firstDayOfWeek) => {
+    const current = new Date(day.year, day.month - 1, day.date);
+    const count = (current.getDay() + 7 - firstDayOfWeek) % 7;
+    return [
+      convertDateToDay(
+        new Date(current.getTime() - 24 * 60 * 60 * 1e3 * count)
+      ),
+      convertDateToDay(
+        new Date(current.getTime() + 24 * 60 * 60 * 1e3 * (6 - count))
+      )
+    ];
+  };
+  const defaultProps$$ = {
+    ...ComponentDefaults,
+    type: "single",
+    firstDayOfWeek: 0
+  };
+  const CalendarCard = React.forwardRef((props, ref) => {
+    const { locale } = useConfig();
+    const {
+      style,
+      type: type2,
+      value,
+      defaultValue,
+      firstDayOfWeek,
+      startDate,
+      endDate,
+      disableDay,
+      renderDay,
+      renderDayTop,
+      renderDayBottom,
+      onDayClick,
+      onPageChange,
+      onChange
+    } = { ...defaultProps$$, ...props };
+    const [month, setMonth] = React.useState(() => {
+      let date2 = new Date(Date.now());
+      const val = value || defaultValue;
+      if (Array.isArray(val)) {
+        if (val.length) {
+          date2 = val[0];
+        }
+      } else if (val) {
+        date2 = val;
+      }
+      return {
+        year: date2.getFullYear(),
+        month: date2.getMonth() + 1
+      };
+    });
+    const [days, setDays] = React.useState([]);
+    const valueToRange = (val) => {
+      if (Array.isArray(val)) {
+        return val.map((date2) => {
+          return convertDateToDay(date2);
+        });
+      }
+      return val ? [convertDateToDay(val)] : [];
+    };
+    const rangeTovalue = (range2) => {
+      if (Array.isArray(range2)) {
+        return range2.map((day) => {
+          return convertDayToDate(day);
+        });
+      }
+      return range2 ? [convertDayToDate(range2)] : [];
+    };
+    const [innerValue, setInnerValue] = React.useState(() => {
+      const val = value || defaultValue ? valueToRange(value || defaultValue) : [];
+      return val;
+    });
+    React.useEffect(() => {
+      const val = value || defaultValue ? valueToRange(value || defaultValue) : [];
+      setInnerValue(val);
+    }, [value]);
+    const change = (v) => {
+      setInnerValue(v);
+      if (type2 === "single") {
+        const date2 = convertDayToDate(v[0]);
+        onChange == null ? void 0 : onChange(date2);
+      } else if (type2 === "multiple" || type2 === "range" || type2 === "week") {
+        const val = rangeTovalue(v);
+        onChange == null ? void 0 : onChange(val);
+      }
+    };
+    const getDays = (month2) => {
+      const y2 = month2.year;
+      const m = month2.month;
+      const days2 = [
+        ...getPrevMonthDays(y2, m, firstDayOfWeek),
+        ...getCurrentMonthDays(y2, m)
+      ];
+      const size = days2.length;
+      const yearOfNextMonth = month2.month === 12 ? month2.year + 1 : month2.year;
+      const monthOfNextMonth = month2.month === 12 ? 1 : month2.month + 1;
+      for (let i = 1; i <= 42 - size; i++) {
+        days2.push({
+          type: "next",
+          year: yearOfNextMonth,
+          month: monthOfNextMonth,
+          date: i
+        });
+      }
+      return days2;
+    };
+    React.useEffect(() => {
+      const newDays = getDays(month);
+      setDays(newDays);
+      onPageChange == null ? void 0 : onPageChange(month);
+    }, [month]);
+    const isSameDay = (day1, day2) => {
+      return (day1 == null ? void 0 : day1.year) === (day2 == null ? void 0 : day2.year) && (day1 == null ? void 0 : day1.month) === (day2 == null ? void 0 : day2.month) && (day1 == null ? void 0 : day1.date) === (day2 == null ? void 0 : day2.date);
+    };
+    const compareDay = (day1, day2) => {
+      if (day1 && day2) {
+        if (day1.year === day2.year) {
+          if (day1.month === day2.month) {
+            return day1.date - day2.date;
+          }
+          return day1.month - day2.month;
+        }
+        return day1.year - day2.year;
+      }
+    };
+    const isDisable = (day) => {
+      if (disableDay && disableDay(day)) {
+        return true;
+      }
+      if (startDate && Number(compareDay(day, convertDateToDay(startDate))) < 0) {
+        return true;
+      }
+      if (endDate && Number(compareDay(day, convertDateToDay(endDate))) > 0) {
+        return true;
+      }
+      return false;
+    };
+    const isActive = (day) => {
+      if (type2 === "single" || type2 === "multiple") {
+        for (const val of innerValue) {
+          if (isSameDay(day, val)) {
+            return true;
+          }
+        }
+      } else if (type2 === "range" && innerValue.length === 1 && isSameDay(innerValue[0], day)) {
+        return true;
+      }
+      return false;
+    };
+    const isStart2 = (day) => {
+      return (type2 === "range" || type2 === "week") && innerValue.length === 2 && isSameDay(day, innerValue[0]);
+    };
+    const isEnd2 = (day) => {
+      return (type2 === "range" || type2 === "week") && innerValue.length === 2 && isSameDay(day, innerValue[1]);
+    };
+    const isMid = (day) => {
+      if (type2 === "range" || type2 === "week") {
+        if (innerValue.length === 2) {
+          const c12 = compareDay(innerValue[0], day);
+          const c22 = compareDay(day, innerValue[1]);
+          if (c12 && c12 < 0 && c22 && c22 < 0) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+    const isWeekend = (day) => {
+      const d = new Date(day.year, day.month - 1, day.date).getDay();
+      return d === 0 || d === 6;
+    };
+    const getClasses = (day) => {
+      if (isDisable(day)) {
+        return ["disabled"];
+      }
+      const res = [];
+      if (day.type === "current") {
+        if (isActive(day)) {
+          res.push("active");
+        }
+        if (isStart2(day)) {
+          res.push("start");
+        }
+        if (isEnd2(day)) {
+          res.push("end");
+        }
+        if (isMid(day)) {
+          res.push("mid");
+        }
+        if (isWeekend(day)) {
+          res.push("weekend");
+        }
+      }
+      return res;
+    };
+    const jumpTo = (year, month2) => {
+      setMonth({ year, month: month2 });
+    };
+    const jump = (step = 1) => {
+      const current = month.year * 12 + month.month;
+      let newMonth = (current + step) % 12;
+      if (newMonth === 0) {
+        newMonth = 12;
+      }
+      const newYear = Math.floor((current + step - newMonth) / 12);
+      setMonth({
+        year: newYear,
+        month: newMonth
+      });
+    };
+    React.useImperativeHandle(ref, () => {
+      return {
+        jump,
+        jumpTo
+      };
+    });
+    const handleDayClick = (day) => {
+      if (day.type === "prev" || day.type === "next" || isDisable(day)) {
+        return;
+      }
+      onDayClick == null ? void 0 : onDayClick(day);
+      switch (type2) {
+        case "single": {
+          if (innerValue[0] && isSameDay(innerValue[0], day)) {
+            change([]);
+          } else {
+            change([day]);
+          }
+          break;
+        }
+        case "multiple": {
+          const t = innerValue.find((i) => isSameDay(i, day));
+          if (t) {
+            change(innerValue.filter((i) => i !== t));
+          } else {
+            change([...innerValue, day]);
+          }
+          break;
+        }
+        case "range": {
+          const len = innerValue.length;
+          if (len === 0 || len === 2) {
+            change([day]);
+          } else if (len === 1) {
+            const t = compareDay(innerValue[0], day);
+            if (t === 0 || t === null || t === void 0) {
+              change([]);
+            } else if (t < 0) {
+              change([innerValue[0], day]);
+            } else {
+              change([day, innerValue[0]]);
+            }
+          } else {
+            console.warn("[NutUI] Calendar range error");
+          }
+          break;
+        }
+        case "week": {
+          if (innerValue.length === 2 || innerValue.length === 0) {
+            const [left, right] = getCurrentWeekDays(day, firstDayOfWeek);
+            change([left, right]);
+          } else {
+            console.warn("[NutUI] Calendar week error");
+          }
+          break;
+        }
+        default: {
+          console.warn("[NutUI] Calendar type error");
+        }
+      }
+    };
+    const monthTitle = locale.calendaritem.monthTitle;
+    const renderHeader = () => {
+      return /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-header" }, /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-header-left" }, /* @__PURE__ */ React.createElement("div", { className: "double-left", onClick: () => jump(-12) }, /* @__PURE__ */ React.createElement(DoubleLeft, null)), /* @__PURE__ */ React.createElement("div", { className: "left", onClick: () => jump(-1) }, /* @__PURE__ */ React.createElement(Left, null))), /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-header-title" }, monthTitle(month.year, month.month)), /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-header-right" }, /* @__PURE__ */ React.createElement("div", { className: "right", onClick: () => jump(1) }, /* @__PURE__ */ React.createElement(Right, null)), /* @__PURE__ */ React.createElement("div", { className: "double-right", onClick: () => jump(12) }, /* @__PURE__ */ React.createElement(DoubleRight, null))));
+    };
+    const [weekHeader] = React.useState(() => {
+      const weekdays = locale.calendaritem.weekdays.map((day, index) => {
+        return {
+          name: day,
+          key: index
+        };
+      });
+      return [
+        ...weekdays.slice(firstDayOfWeek, 7),
+        ...weekdays.slice(0, firstDayOfWeek)
+      ];
+    });
+    const renderContent = () => {
+      return /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-content" }, /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-days" }, weekHeader.map((day) => {
+        return /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames("nut-calendarcard-day", "header", {
+              weekend: day.key === 0 || day.key === 6
+            }),
+            key: day.key
+          },
+          day.name
+        );
+      })), /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-days" }, days.map((day) => /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(
+            "nut-calendarcard-day",
+            day.type,
+            getClasses(day)
+          ),
+          key: `${day.year}-${day.month}-${day.date}`,
+          onClick: () => handleDayClick(day)
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-day-top" }, renderDayTop ? renderDayTop(day) : ""),
+        /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-day-inner" }, renderDay ? renderDay(day) : day.date),
+        /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard-day-bottom" }, renderDayBottom ? renderDayBottom(day) : "")
+      ))));
+    };
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "nut-calendarcard", style }, renderHeader(), renderContent()));
+  });
+  CalendarCard.defaultProps = defaultProps$$;
+  CalendarCard.displayName = "NutCalendarCard";
   const CheckboxGroupContext = React.createContext(null);
   const Context$1 = CheckboxGroupContext;
   const defaultProps$_ = {
@@ -14511,71 +15070,6 @@ Please add \`${key}Action\` when creating your handler.`);
   Checkbox.defaultProps = defaultProps$Z;
   Checkbox.displayName = "NutCheckBox";
   Checkbox.Group = CheckboxGroup;
-  const MIN_DISTANCE = 10;
-  function getDirection(x2, y2) {
-    if (x2 > y2 && x2 > MIN_DISTANCE) {
-      return "horizontal";
-    }
-    if (y2 > x2 && y2 > MIN_DISTANCE) {
-      return "vertical";
-    }
-    return "";
-  }
-  function useTouch() {
-    const [startX, SetStartX] = React.useState(0);
-    const [startY, SetStartY] = React.useState(0);
-    const [moveX, SetMoveX] = React.useState(0);
-    const [moveY, SetMoveY] = React.useState(0);
-    const [deltaX, SetDeltaX] = React.useState(0);
-    const [deltaY, SetDeltaY] = React.useState(0);
-    const [offsetX, SetOffsetX] = React.useState(0);
-    const [offsetY, SetOffsetY] = React.useState(0);
-    const [direction, SetDirection] = React.useState("");
-    const isVertical = () => direction === "vertical";
-    const isHorizontal = () => direction === "horizontal";
-    const reset = () => {
-      SetDeltaX(0);
-      SetDeltaY(0);
-      SetOffsetX(0);
-      SetOffsetY(0);
-      SetDirection("");
-    };
-    const start2 = (event) => {
-      reset();
-      SetStartX(event.touches[0].clientX);
-      SetStartY(event.touches[0].clientY);
-    };
-    const move = (event) => {
-      const touch = event.touches[0];
-      const dX = touch.clientX - startX;
-      const dY = touch.clientY - startY;
-      SetDeltaX(dX);
-      SetDeltaY(dY);
-      SetMoveX(touch.clientX);
-      SetMoveY(touch.clientY);
-      SetOffsetX(Math.abs(dX));
-      SetOffsetY(Math.abs(dY));
-      if (!direction) {
-        SetDirection(getDirection(offsetX, offsetY));
-      }
-    };
-    return {
-      move,
-      start: start2,
-      reset,
-      startX,
-      startY,
-      moveX,
-      moveY,
-      deltaX,
-      deltaY,
-      offsetX,
-      offsetY,
-      direction,
-      isVertical,
-      isHorizontal
-    };
-  }
   const InternalPickerPanel = (props, ref) => {
     const {
       keyIndex = 0,
@@ -14647,7 +15141,7 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const touchStart = (event) => {
       touch.start(event);
-      setStartY(touch.deltaY);
+      setStartY(touch.deltaY.current);
       setStartTime(Date.now());
       transformY.current = scrollDistance;
     };
@@ -14657,13 +15151,13 @@ Please add \`${key}Action\` when creating your handler.`);
         moving.current = true;
         preventDefault2(event, true);
       }
-      const move = touch.deltaY - startY;
+      const move = touch.deltaY.current - startY;
       setMove(move);
     };
     const touchEnd = (event) => {
       if (!moving.current)
         return;
-      const move = touch.deltaY - startY;
+      const move = touch.deltaY.current - startY;
       const moveTime = Date.now() - startTime;
       if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
         const distance = momentum(move, moveTime);
@@ -14741,6 +15235,19 @@ Please add \`${key}Action\` when creating your handler.`);
       stopMomentum,
       moving: moving.current
     }));
+    React.useEffect(() => {
+      var _a2, _b, _c;
+      const options22 = passiveSupported ? { passive: false } : false;
+      (_a2 = PickerPanelRef.current) == null ? void 0 : _a2.addEventListener("touchstart", touchStart, options22);
+      (_b = PickerPanelRef.current) == null ? void 0 : _b.addEventListener("touchmove", touchMove, options22);
+      (_c = PickerPanelRef.current) == null ? void 0 : _c.addEventListener("touchend", touchEnd, options22);
+      return () => {
+        var _a3, _b2, _c2;
+        (_a3 = PickerPanelRef.current) == null ? void 0 : _a3.removeEventListener("touchstart", touchStart);
+        (_b2 = PickerPanelRef.current) == null ? void 0 : _b2.removeEventListener("touchmove", touchMove);
+        (_c2 = PickerPanelRef.current) == null ? void 0 : _c2.removeEventListener("touchend", touchEnd);
+      };
+    });
     return /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -14818,6 +15325,7 @@ Please add \`${key}Action\` when creating your handler.`);
       visible,
       title,
       options: options2 = [],
+      popupProps = {},
       defaultValue = [],
       className,
       style,
@@ -14989,7 +15497,7 @@ Please add \`${key}Action\` when creating your handler.`);
       if (moving) {
         isConfirmEvent.current = true;
       } else {
-        setSelectedValue(innerValue);
+        setSelectedValue(innerValue, true);
         closePicker();
       }
       setTimeout(() => {
@@ -15027,6 +15535,7 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(React.Fragment, null, typeof children === "function" && children(selectedValue), /* @__PURE__ */ React.createElement(
       Popup,
       {
+        ...popupProps,
         visible: innerVisible,
         position: "bottom",
         afterClose: () => {
@@ -15074,6 +15583,7 @@ Please add \`${key}Action\` when creating your handler.`);
       visible,
       title,
       defaultValue,
+      pickerProps = {},
       formatter,
       onClose,
       onConfirm,
@@ -15346,6 +15856,7 @@ Please add \`${key}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement("div", { className: `nut-datepicker ${className}`, style, ...rest }, options2.length && /* @__PURE__ */ React.createElement(
       Picker$1,
       {
+        ...pickerProps,
         title,
         visible,
         options: options2,
@@ -16950,7 +17461,7 @@ Please add \`${key}Action\` when creating your handler.`);
         }
         setValue(val);
         const eventHandler = props[trigger];
-        if (eventHandler && typeof eventHandler === "function") {
+        if (eventHandler && typeof eventHandler === "function" && trigger !== "onChange") {
           eventHandler(val);
         }
       };
@@ -18243,11 +18754,11 @@ Please add \`${key}Action\` when creating your handler.`);
       touch.move(event);
       setDragStatus("draging");
       const rect = getRect(root2.current);
-      let delta = touch.deltaX;
+      let delta = touch.deltaX.current;
       let total = rect.width;
       let diff = delta / total * scope();
       if (vertical) {
-        delta = touch.deltaY;
+        delta = touch.deltaY.current;
         total = rect.height;
         diff = delta / total * scope();
       }
@@ -20375,7 +20886,7 @@ Please add \`${key}Action\` when creating your handler.`);
     content: "",
     closeable: false,
     wrap: false,
-    leftIcon: null,
+    leftIcon: /* @__PURE__ */ React.createElement(k$1, { width: 16, height: 16 }),
     rightIcon: null,
     delay: 1,
     scrollable: null,
@@ -20640,6 +21151,9 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const getStyle = (moveOffset = offset) => {
       const target = innerRef.current;
+      if (!target) {
+        return;
+      }
       let _offset = 0;
       const val = rect.height - height;
       _offset = moveOffset + Number(active === childCount - 1 && val / 2);
@@ -20697,7 +21211,7 @@ Please add \`${key}Action\` when creating your handler.`);
         stopAutoPlay();
       };
     }, []);
-    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className || ""}`, style }, showNoticeBar && direction === "horizontal" ? /* @__PURE__ */ React.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick2 }, /* @__PURE__ */ React.createElement("div", { className: "left-icon" }, leftIcon || /* @__PURE__ */ React.createElement(k$1, { width: 16, height: 16 })), /* @__PURE__ */ React.createElement("div", { ref: wrapRef, className: "wrap" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className || ""}`, style }, showNoticeBar && direction === "horizontal" ? /* @__PURE__ */ React.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick2 }, leftIcon ? /* @__PURE__ */ React.createElement("div", { className: "left-icon" }, leftIcon) : null, /* @__PURE__ */ React.createElement("div", { ref: wrapRef, className: "wrap" }, /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: contentRef,
@@ -21199,19 +21713,6 @@ Please add \`${key}Action\` when creating your handler.`);
     return position;
   }
   const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
-  let passiveSupported = false;
-  if (canUseDom) {
-    try {
-      const opts = Object.defineProperty({}, "passive", {
-        get() {
-          passiveSupported = true;
-        }
-      });
-      window.addEventListener("test-passive-supported", null, opts);
-    } catch (e) {
-      console.log(e);
-    }
-  }
   const defaultProps$w = {
     ...ComponentDefaults,
     pullingText: "",
@@ -21608,27 +22109,29 @@ Please add \`${key}Action\` when creating your handler.`);
     const leftWidth = actionWidth.left;
     const rightWidth = actionWidth.right;
     const onTouchStart = (event) => {
+      var _a2;
       if (!props.disabled) {
         startOffset.current = state.offset;
         touch.start(event);
-        props.onTouchStart && props.onTouchStart(event);
+        (_a2 = props.onTouchStart) == null ? void 0 : _a2.call(props, event);
       }
     };
     const onTouchMove = (event) => {
+      var _a2;
       if (props.disabled) {
         return;
       }
       touch.move(event);
-      props.onTouchMove && props.onTouchMove(event);
+      (_a2 = props.onTouchMove) == null ? void 0 : _a2.call(props, event);
       if (touch.isHorizontal()) {
         lockClick.current = true;
         const newState = { ...state, dragging: true };
-        const isEdge = !opened || touch.deltaX * startOffset.current < 0;
+        const isEdge = !opened || touch.deltaX.current * startOffset.current < 0;
         if (isEdge) {
           preventDefault(event, true);
         }
         newState.offset = rangeCalculation(
-          touch.deltaX + startOffset.current,
+          touch.deltaX.current + startOffset.current,
           -rightWidth,
           leftWidth
         );
@@ -21636,13 +22139,14 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     };
     const onTouchEnd = (event) => {
+      var _a2;
       if (state.dragging) {
         setState((v) => ({ ...v, dragging: false }));
         toggle(state.offset > 0 ? "left" : "right");
         setTimeout(() => {
           lockClick.current = false;
         }, 0);
-        props.onTouchEnd && props.onTouchEnd(event);
+        (_a2 = props.onTouchEnd) == null ? void 0 : _a2.call(props, event);
       }
     };
     const toggle = (side) => {
@@ -25362,6 +25866,7 @@ Please add \`${key}Action\` when creating your handler.`);
   exports2.Barrage = Barrage;
   exports2.Button = Button;
   exports2.Calendar = Calendar;
+  exports2.CalendarCard = CalendarCard;
   exports2.CalendarItem = CalendarItem;
   exports2.Card = Card;
   exports2.Cascader = Cascader;