@nutui/nutui-react 2.6.2 → 2.6.4

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.2 Fri Apr 26 2024 15:03:50 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.4 Fri May 10 2024 14:45:33 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/tr-TR.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.2 Fri Apr 26 2024 15:03:50 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.4 Fri May 10 2024 14:45:33 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.2 Fri Apr 26 2024 15:03:50 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.4 Fri May 10 2024 14:45:33 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.2 Fri Apr 26 2024 15:03:50 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.4 Fri May 10 2024 14:45:33 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-UG.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.2 Fri Apr 26 2024 15:03:50 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.4 Fri May 10 2024 14:45:33 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.6.2 Fri Apr 26 2024 15:03:22 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.4 Fri May 10 2024 14:45:06 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -1242,7 +1242,6 @@ const CellGroup = (props) => {
     /* @__PURE__ */ React__default.createElement(CellGroupContext.Provider, { value: { divider } }, children)
   ));
 };
-CellGroup.defaultProps = defaultProps$1t;
 CellGroup.displayName = "NutCellGroup";
 const defaultProps$1s = {
   ...ComponentDefaults,
@@ -1302,7 +1301,6 @@ const Cell = (props) => {
     (ctx2 == null ? void 0 : ctx2.divider) ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$q}-divider` }) : null
   );
 };
-Cell.defaultProps = defaultProps$1s;
 Cell.displayName = "NutCell";
 Cell.Group = CellGroup;
 var INFINITY = 1 / 0;
@@ -2490,6 +2488,7 @@ const Image$1 = (props) => {
     error,
     loading,
     lazy,
+    draggable,
     onClick,
     onLoad,
     onError
@@ -2618,7 +2617,7 @@ const Image$1 = (props) => {
         loading: "lazy",
         onLoad: handleLoad,
         onError: handleError,
-        draggable: props.draggable
+        draggable
       }
     ) : /* @__PURE__ */ React__default.createElement(
       "img",
@@ -2630,14 +2629,13 @@ const Image$1 = (props) => {
         alt,
         onLoad: handleLoad,
         onError: handleError,
-        draggable: props.draggable
+        draggable
       }
     ),
     renderLoading(),
     renderErrorImg()
   );
 };
-Image$1.defaultProps = defaultProps$1r;
 Image$1.displayName = "NutImage";
 function _extends$4() {
   _extends$4 = Object.assign ? Object.assign.bind() : function(target) {
@@ -4598,7 +4596,7 @@ const Overlay = (props) => {
       setInnerVisible(false);
     }
   }, [visible]);
-  useLockScroll(nodeRef, !!props.lockScroll && innerVisible);
+  useLockScroll(nodeRef, !!lockScroll && innerVisible);
   const classes = classNames(classPrefix2, className);
   const styles = {
     ...style
@@ -4638,7 +4636,6 @@ const Overlay = (props) => {
     )
   ));
 };
-Overlay.defaultProps = defaultOverlayProps;
 Overlay.displayName = "NutOverlay";
 const DataContext$1 = createContext({});
 const defaultProps$1q = {
@@ -4681,7 +4678,6 @@ const Col = (props) => {
     children
   );
 };
-Col.defaultProps = defaultProps$1q;
 Col.displayName = "NutCol";
 const defaultProps$1p = {
   ...ComponentDefaults,
@@ -4706,7 +4702,6 @@ const Divider = (props) => {
   });
   return /* @__PURE__ */ React__default.createElement("div", { className: `${classes} ${className || ""}`, style, ...rest }, children);
 };
-Divider.defaultProps = defaultProps$1p;
 Divider.displayName = "NutDivider";
 const gridContext = {
   onClick: (item, index) => {
@@ -4797,7 +4792,6 @@ const GridItem = (props) => {
     /* @__PURE__ */ React__default.createElement("div", { className: contentClass() }, children && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children), text && /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-text` }, text))
   );
 };
-GridItem.defaultProps = defaultProps$1o;
 GridItem.displayName = "NutGridItem";
 const defaultProps$1n = {
   columns: 4,
@@ -4854,7 +4848,6 @@ const Grid = (props) => {
     });
   })));
 };
-Grid.defaultProps = defaultProps$1n;
 Grid.displayName = "NutGrid";
 Grid.Item = GridItem;
 const defaultProps$1m = {};
@@ -4917,7 +4910,6 @@ const Row = (props) => {
     children
   ));
 };
-Row.defaultProps = defaultProps$1l;
 Row.displayName = "NutRow";
 const prefixCls$1 = "nut-space";
 const defaultProps$1k = {
@@ -4940,7 +4932,6 @@ const Space = (props) => {
     return child !== null && child !== void 0 && /* @__PURE__ */ React__default.createElement("div", { className: `${prefixCls$1}-item` }, child);
   }));
 };
-Space.defaultProps = defaultProps$1k;
 Space.displayName = "NutSpace";
 function isWindow(val) {
   return val === window;
@@ -5128,7 +5119,6 @@ const Sticky = (props) => {
     /* @__PURE__ */ React__default.createElement("div", { className: "nut-sticky-box", ref: stickyRef, style: stickyStyle }, children)
   );
 };
-Sticky.defaultProps = defaultProps$1j;
 Sticky.displayName = "NutSticky";
 const classPrefix$k = "nut-safe-area";
 const SafeArea = (props) => {
@@ -5142,6 +5132,7 @@ const SafeArea = (props) => {
     }
   );
 };
+SafeArea.displayName = "NutSafeArea";
 const defaultProps$1i = {
   ...ComponentDefaults,
   target: "",
@@ -5258,7 +5249,6 @@ const BackTop = (props) => {
     children || /* @__PURE__ */ React__default.createElement(e$1, { width: 19, height: 19, className: "nut-backtop-main" })
   );
 };
-BackTop.defaultProps = defaultProps$1i;
 BackTop.displayName = "NutBackTop";
 function clamp$2(v, min, max) {
   return Math.max(min, Math.min(v, max));
@@ -10578,7 +10568,6 @@ const Elevator = (props) => {
     })
   ))) : null);
 };
-Elevator.defaultProps = defaultProps$1h;
 Elevator.displayName = "NutElevator";
 Elevator.Context = elevatorContext;
 const defaultProps$1g = {
@@ -10661,7 +10650,6 @@ const FixedNav = (props) => {
     /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-btn`, onClick: () => onUpdateValue() }, content || /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(e$d, { color: "#fff" }), /* @__PURE__ */ React__default.createElement("div", { className: "text" }, visible ? activeText || locale.fixednav.activeText : inactiveText || locale.fixednav.inactiveText)))
   );
 };
-FixedNav.defaultProps = defaultProps$1g;
 FixedNav.displayName = "NutFixedNav";
 const defaultProps$1f = {
   ...ComponentDefaults,
@@ -10764,7 +10752,6 @@ const NavBar = (props) => {
   const cls = classNames(classPrefix2, classes, className);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, fixed && placeholder ? /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-placeholder` }, renderWrapper()) : renderWrapper());
 };
-NavBar.defaultProps = defaultProps$1f;
 NavBar.displayName = "NutNavBar";
 const defaultProps$1e = {
   ...ComponentDefaults,
@@ -10991,12 +10978,13 @@ const SideNavBar = (props) => {
     children,
     className,
     onClose,
+    indent,
     ...rest
   } = {
     ...defaultProps$1d,
     ...props
   };
-  const indent = props.indent ? Number(props.indent) : 20;
+  const innerIndent = indent ? Number(indent) : 20;
   return /* @__PURE__ */ React__default.createElement(
     Popup,
     {
@@ -11015,17 +11003,16 @@ const SideNavBar = (props) => {
         "div",
         {
           className: `${classPrefix2}-title ${classPrefix2}-border-bt`,
-          style: { paddingLeft: `${indent}px` }
+          style: { paddingLeft: `${innerIndent}px` }
         },
         title,
         " ",
         /* @__PURE__ */ React__default.createElement("i", { className: "arrow-icon arrow-down" })
       ),
-      /* @__PURE__ */ React__default.createElement(OffsetContext.Provider, { value: indent }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-content` }, children))
+      /* @__PURE__ */ React__default.createElement(OffsetContext.Provider, { value: innerIndent }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-content` }, children))
     )))
   );
 };
-SideNavBar.defaultProps = defaultProps$1d;
 SideNavBar.displayName = "NutSideNavBar";
 const SideNavBarItem = (props) => {
   const classPrefix2 = "nut-subsidenavbar";
@@ -11339,7 +11326,6 @@ const Tabbar = (props) => {
     (fixed || safeArea) && /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-safe-area` })
   );
 };
-Tabbar.defaultProps = defaultProps$19;
 Tabbar.displayName = "NutTabbar";
 Tabbar.Item = TabbarItem;
 const defaultProps$18 = {
@@ -11388,18 +11374,19 @@ const Tabs = (props) => {
     onChange,
     className,
     autoHeight,
+    value: outerValue,
+    defaultValue: outerDefaultValue,
     ...rest
   } = {
     ...defaultProps$17,
     ...props
   };
   const [value, setValue] = usePropsValue({
-    value: props.value,
-    defaultValue: props.defaultValue,
+    value: outerValue,
+    defaultValue: outerDefaultValue,
     finalValue: 0,
     onChange
   });
-  const [contentStyle, setContentStyle] = useState({});
   const titleItemsRef = useRef([]);
   const navRef = useRef(null);
   const scrollDirection = (nav, to2, duration2, direction2) => {
@@ -11426,13 +11413,13 @@ const Tabs = (props) => {
     }
     const title2 = titleItem[index];
     let to2 = 0;
-    if (props.direction === "vertical") {
+    if (direction === "vertical") {
       const runTop = title2.offsetTop - nav.offsetTop + 10;
       to2 = runTop - (nav.offsetHeight - title2.offsetHeight) / 2;
     } else {
       to2 = title2.offsetLeft - (nav.offsetWidth - title2.offsetWidth) / 2;
     }
-    scrollDirection(nav, to2, immediate ? 0 : 0.3, props.direction);
+    scrollDirection(nav, to2, immediate ? 0 : 0.3, direction);
   };
   const getTitles = () => {
     const titles2 = [];
@@ -11480,13 +11467,17 @@ const Tabs = (props) => {
     color: activeType === "smile" ? activeColor : "",
     background: activeType === "line" ? activeColor : ""
   };
-  useEffect(() => {
+  const getContentStyle = () => {
     let index = titles.current.findIndex((t2) => t2.value == value);
     index = index < 0 ? 0 : index;
-    setContentStyle({
+    return {
       transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
       transitionDuration: `${duration}ms`
-    });
+    };
+  };
+  useEffect(() => {
+    let index = titles.current.findIndex((t2) => t2.value == value);
+    index = index < 0 ? 0 : index;
     setTimeout(() => {
       scrollIntoView(index);
     });
@@ -11541,7 +11532,7 @@ const Tabs = (props) => {
         item.title
       )
     );
-  })), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$j}-content-wrap` }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$j}-content`, style: contentStyle }, React__default.Children.map(children, (child, idx) => {
+  })), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$j}-content-wrap` }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix$j}-content`, style: getContentStyle() }, React__default.Children.map(children, (child, idx) => {
     if (!React__default.isValidElement(child)) {
       return null;
     }
@@ -11558,7 +11549,6 @@ const Tabs = (props) => {
     return React__default.cloneElement(child, childProps);
   }))));
 };
-Tabs.defaultProps = defaultProps$17;
 Tabs.displayName = "NutTabs";
 Tabs.TabPane = TabPane;
 const formatTree = (tree, parent, config2) => tree.map((node) => {
@@ -23406,7 +23396,8 @@ const ImagePreview = (props) => {
     setActive(page + 1);
     (_a = props.onChange) == null ? void 0 : _a.call(props, page + 1);
   };
-  const onCloseInner = () => {
+  const onCloseInner = (e2) => {
+    e2.stopPropagation();
     setShowPop(false);
     setActive(innerNo);
     scaleNow();
@@ -23416,9 +23407,9 @@ const ImagePreview = (props) => {
       scale: 1
     });
   };
-  const closeOnImg = () => {
+  const closeOnImg = (e2) => {
     if (closeOnContentClick) {
-      onCloseInner();
+      onCloseInner(e2);
     }
   };
   const duration = typeof autoPlay === "string" ? parseInt(autoPlay) : autoPlay;

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.nutui || {}, global2.nutui.react = {}), global2.React, global2.ReactDOM));
 })(this, function(exports2, React, ReactDOM) {
   "use strict";/*!
-* @nutui/nutui-react v2.6.2 Fri Apr 26 2024 15:03:22 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.6.4 Fri May 10 2024 14:45:06 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -1260,7 +1260,6 @@ Check the top-level render call using <` + t2 + ">.");
       /* @__PURE__ */ React.createElement(CellGroupContext.Provider, { value: { divider } }, children)
     ));
   };
-  CellGroup.defaultProps = defaultProps$1t;
   CellGroup.displayName = "NutCellGroup";
   const defaultProps$1s = {
     ...ComponentDefaults,
@@ -1320,7 +1319,6 @@ Check the top-level render call using <` + t2 + ">.");
       (ctx2 == null ? void 0 : ctx2.divider) ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$q}-divider` }) : null
     );
   };
-  Cell.defaultProps = defaultProps$1s;
   Cell.displayName = "NutCell";
   Cell.Group = CellGroup;
   var INFINITY = 1 / 0;
@@ -2508,6 +2506,7 @@ Check the top-level render call using <` + t2 + ">.");
       error,
       loading,
       lazy,
+      draggable,
       onClick,
       onLoad,
       onError
@@ -2636,7 +2635,7 @@ Check the top-level render call using <` + t2 + ">.");
           loading: "lazy",
           onLoad: handleLoad,
           onError: handleError,
-          draggable: props.draggable
+          draggable
         }
       ) : /* @__PURE__ */ React.createElement(
         "img",
@@ -2648,14 +2647,13 @@ Check the top-level render call using <` + t2 + ">.");
           alt,
           onLoad: handleLoad,
           onError: handleError,
-          draggable: props.draggable
+          draggable
         }
       ),
       renderLoading(),
       renderErrorImg()
     );
   };
-  Image$1.defaultProps = defaultProps$1r;
   Image$1.displayName = "NutImage";
   function _extends$4() {
     _extends$4 = Object.assign ? Object.assign.bind() : function(target) {
@@ -4616,7 +4614,7 @@ Check the top-level render call using <` + t2 + ">.");
         setInnerVisible(false);
       }
     }, [visible]);
-    useLockScroll(nodeRef, !!props.lockScroll && innerVisible);
+    useLockScroll(nodeRef, !!lockScroll && innerVisible);
     const classes = classNames(classPrefix2, className);
     const styles = {
       ...style
@@ -4656,7 +4654,6 @@ Check the top-level render call using <` + t2 + ">.");
       )
     ));
   };
-  Overlay.defaultProps = defaultOverlayProps;
   Overlay.displayName = "NutOverlay";
   const DataContext$1 = React.createContext({});
   const defaultProps$1q = {
@@ -4699,7 +4696,6 @@ Check the top-level render call using <` + t2 + ">.");
       children
     );
   };
-  Col.defaultProps = defaultProps$1q;
   Col.displayName = "NutCol";
   const defaultProps$1p = {
     ...ComponentDefaults,
@@ -4724,7 +4720,6 @@ Check the top-level render call using <` + t2 + ">.");
     });
     return /* @__PURE__ */ React.createElement("div", { className: `${classes} ${className || ""}`, style, ...rest }, children);
   };
-  Divider.defaultProps = defaultProps$1p;
   Divider.displayName = "NutDivider";
   const gridContext = {
     onClick: (item, index) => {
@@ -4815,7 +4810,6 @@ Check the top-level render call using <` + t2 + ">.");
       /* @__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$1o;
   GridItem.displayName = "NutGridItem";
   const defaultProps$1n = {
     columns: 4,
@@ -4872,7 +4866,6 @@ Check the top-level render call using <` + t2 + ">.");
       });
     })));
   };
-  Grid.defaultProps = defaultProps$1n;
   Grid.displayName = "NutGrid";
   Grid.Item = GridItem;
   const defaultProps$1m = {};
@@ -4935,7 +4928,6 @@ Check the top-level render call using <` + t2 + ">.");
       children
     ));
   };
-  Row.defaultProps = defaultProps$1l;
   Row.displayName = "NutRow";
   const prefixCls$1 = "nut-space";
   const defaultProps$1k = {
@@ -4958,7 +4950,6 @@ Check the top-level render call using <` + t2 + ">.");
       return child !== null && child !== void 0 && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls$1}-item` }, child);
     }));
   };
-  Space.defaultProps = defaultProps$1k;
   Space.displayName = "NutSpace";
   function isWindow(val) {
     return val === window;
@@ -5146,7 +5137,6 @@ Check the top-level render call using <` + t2 + ">.");
       /* @__PURE__ */ React.createElement("div", { className: "nut-sticky-box", ref: stickyRef, style: stickyStyle }, children)
     );
   };
-  Sticky.defaultProps = defaultProps$1j;
   Sticky.displayName = "NutSticky";
   const classPrefix$k = "nut-safe-area";
   const SafeArea = (props) => {
@@ -5160,6 +5150,7 @@ Check the top-level render call using <` + t2 + ">.");
       }
     );
   };
+  SafeArea.displayName = "NutSafeArea";
   const defaultProps$1i = {
     ...ComponentDefaults,
     target: "",
@@ -5276,7 +5267,6 @@ Check the top-level render call using <` + t2 + ">.");
       children || /* @__PURE__ */ React.createElement(e$1, { width: 19, height: 19, className: "nut-backtop-main" })
     );
   };
-  BackTop.defaultProps = defaultProps$1i;
   BackTop.displayName = "NutBackTop";
   function clamp$2(v, min, max) {
     return Math.max(min, Math.min(v, max));
@@ -10596,7 +10586,6 @@ Please add \`${key}Action\` when creating your handler.`);
       })
     ))) : null);
   };
-  Elevator.defaultProps = defaultProps$1h;
   Elevator.displayName = "NutElevator";
   Elevator.Context = elevatorContext;
   const defaultProps$1g = {
@@ -10679,7 +10668,6 @@ 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(e$d, { color: "#fff" }), /* @__PURE__ */ React.createElement("div", { className: "text" }, visible ? activeText || locale.fixednav.activeText : inactiveText || locale.fixednav.inactiveText)))
     );
   };
-  FixedNav.defaultProps = defaultProps$1g;
   FixedNav.displayName = "NutFixedNav";
   const defaultProps$1f = {
     ...ComponentDefaults,
@@ -10782,7 +10770,6 @@ 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$1f;
   NavBar.displayName = "NutNavBar";
   const defaultProps$1e = {
     ...ComponentDefaults,
@@ -11009,12 +10996,13 @@ Please add \`${key}Action\` when creating your handler.`);
       children,
       className,
       onClose,
+      indent,
       ...rest
     } = {
       ...defaultProps$1d,
       ...props
     };
-    const indent = props.indent ? Number(props.indent) : 20;
+    const innerIndent = indent ? Number(indent) : 20;
     return /* @__PURE__ */ React.createElement(
       Popup,
       {
@@ -11033,17 +11021,16 @@ Please add \`${key}Action\` when creating your handler.`);
           "div",
           {
             className: `${classPrefix2}-title ${classPrefix2}-border-bt`,
-            style: { paddingLeft: `${indent}px` }
+            style: { paddingLeft: `${innerIndent}px` }
           },
           title,
           " ",
           /* @__PURE__ */ React.createElement("i", { className: "arrow-icon arrow-down" })
         ),
-        /* @__PURE__ */ React.createElement(OffsetContext.Provider, { value: indent }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-content` }, children))
+        /* @__PURE__ */ React.createElement(OffsetContext.Provider, { value: innerIndent }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-content` }, children))
       )))
     );
   };
-  SideNavBar.defaultProps = defaultProps$1d;
   SideNavBar.displayName = "NutSideNavBar";
   const SideNavBarItem = (props) => {
     const classPrefix2 = "nut-subsidenavbar";
@@ -11357,7 +11344,6 @@ Please add \`${key}Action\` when creating your handler.`);
       (fixed || safeArea) && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-safe-area` })
     );
   };
-  Tabbar.defaultProps = defaultProps$19;
   Tabbar.displayName = "NutTabbar";
   Tabbar.Item = TabbarItem;
   const defaultProps$18 = {
@@ -11406,18 +11392,19 @@ Please add \`${key}Action\` when creating your handler.`);
       onChange,
       className,
       autoHeight,
+      value: outerValue,
+      defaultValue: outerDefaultValue,
       ...rest
     } = {
       ...defaultProps$17,
       ...props
     };
     const [value, setValue] = usePropsValue({
-      value: props.value,
-      defaultValue: props.defaultValue,
+      value: outerValue,
+      defaultValue: outerDefaultValue,
       finalValue: 0,
       onChange
     });
-    const [contentStyle, setContentStyle] = React.useState({});
     const titleItemsRef = React.useRef([]);
     const navRef = React.useRef(null);
     const scrollDirection = (nav, to2, duration2, direction2) => {
@@ -11444,13 +11431,13 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       const title2 = titleItem[index];
       let to2 = 0;
-      if (props.direction === "vertical") {
+      if (direction === "vertical") {
         const runTop = title2.offsetTop - nav.offsetTop + 10;
         to2 = runTop - (nav.offsetHeight - title2.offsetHeight) / 2;
       } else {
         to2 = title2.offsetLeft - (nav.offsetWidth - title2.offsetWidth) / 2;
       }
-      scrollDirection(nav, to2, immediate ? 0 : 0.3, props.direction);
+      scrollDirection(nav, to2, immediate ? 0 : 0.3, direction);
     };
     const getTitles = () => {
       const titles2 = [];
@@ -11498,13 +11485,17 @@ Please add \`${key}Action\` when creating your handler.`);
       color: activeType === "smile" ? activeColor : "",
       background: activeType === "line" ? activeColor : ""
     };
-    React.useEffect(() => {
+    const getContentStyle = () => {
       let index = titles.current.findIndex((t2) => t2.value == value);
       index = index < 0 ? 0 : index;
-      setContentStyle({
+      return {
         transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
         transitionDuration: `${duration}ms`
-      });
+      };
+    };
+    React.useEffect(() => {
+      let index = titles.current.findIndex((t2) => t2.value == value);
+      index = index < 0 ? 0 : index;
       setTimeout(() => {
         scrollIntoView(index);
       });
@@ -11559,7 +11550,7 @@ Please add \`${key}Action\` when creating your handler.`);
           item.title
         )
       );
-    })), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$j}-content-wrap` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$j}-content`, style: contentStyle }, React.Children.map(children, (child, idx) => {
+    })), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$j}-content-wrap` }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$j}-content`, style: getContentStyle() }, React.Children.map(children, (child, idx) => {
       if (!React.isValidElement(child)) {
         return null;
       }
@@ -11576,7 +11567,6 @@ Please add \`${key}Action\` when creating your handler.`);
       return React.cloneElement(child, childProps);
     }))));
   };
-  Tabs.defaultProps = defaultProps$17;
   Tabs.displayName = "NutTabs";
   Tabs.TabPane = TabPane;
   const formatTree = (tree, parent, config2) => tree.map((node) => {
@@ -23424,7 +23414,8 @@ Please add \`${key}Action\` when creating your handler.`);
       setActive(page + 1);
       (_a = props.onChange) == null ? void 0 : _a.call(props, page + 1);
     };
-    const onCloseInner = () => {
+    const onCloseInner = (e2) => {
+      e2.stopPropagation();
       setShowPop(false);
       setActive(innerNo);
       scaleNow();
@@ -23434,9 +23425,9 @@ Please add \`${key}Action\` when creating your handler.`);
         scale: 1
       });
     };
-    const closeOnImg = () => {
+    const closeOnImg = (e2) => {
       if (closeOnContentClick) {
-        onCloseInner();
+        onCloseInner(e2);
       }
     };
     const duration = typeof autoPlay === "string" ? parseInt(autoPlay) : autoPlay;

package/dist/packages/tabpane/tabpane.scss

@@ -4,7 +4,7 @@
   display: block;
   background-color: $color-background-overlay;
   color: $color-title;
-  padding: 24px 20px;
+  padding: $tabs-tabpane-padding;
   box-sizing: border-box;
   overflow: auto;