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

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.22 Fri Oct 27 2023 18:21:25 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -12189,13 +12189,13 @@ 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]
     );
@@ -14576,6 +14576,19 @@ Please add \`${key}Action\` when creating your handler.`);
       isHorizontal
     };
   }
+  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 InternalPickerPanel = (props, ref) => {
     const {
       keyIndex = 0,
@@ -14741,6 +14754,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",
       {
@@ -14989,7 +15015,7 @@ Please add \`${key}Action\` when creating your handler.`);
       if (moving) {
         isConfirmEvent.current = true;
       } else {
-        setSelectedValue(innerValue);
+        setSelectedValue(innerValue, true);
         closePicker();
       }
       setTimeout(() => {
@@ -16950,7 +16976,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);
         }
       };
@@ -20375,7 +20401,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,
@@ -20697,7 +20723,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 +21225,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: "",

package/dist/packages/tabpane/tabpane.scss

@@ -1,8 +1,3 @@
-.nut-theme-dark {
-  .nut-tabpane {
-    background: $dark4;
-  }
-}
 .nut-tabpane {
   width: 100%;
   flex-shrink: 0;
@@ -12,9 +7,6 @@
   padding: 24px 20px;
   box-sizing: border-box;
   overflow: auto;
-  &.active {
-    // overflow: visible;
-  }
 
   &.inactive {
     overflow: visible;

package/dist/packages/tabs/tabs.scss

@@ -5,14 +5,13 @@
 }
 
 .nut-tabs__titles {
+  display: flex;
   box-sizing: border-box;
   height: $tabs-horizontal-titles-height;
   padding: 0 10px;
-  display: flex;
   user-select: none;
   background: $tabs-titles-background-color;
   border-radius: $tabs-titles-border-radius;
-  flex-shrink: 0;
   overflow: hidden;
 
   &::-webkit-scrollbar {
@@ -20,6 +19,7 @@
     width: 0;
     background: transparent;
   }
+
   .nut-tabs__list {
     width: 100%;
     height: auto;
@@ -39,23 +39,19 @@
 .nut-tabs__titles--scrollable {
   overflow-x: auto;
   overflow-y: hidden;
-
-  .nut-tabs__titles-item {
-    width: auto;
-  }
 }
 
 .nut-tabs__titles-item {
   position: relative;
   min-width: $tabs-horizontal-titles-item-min-width;
   display: flex;
-  flex: 1;
+  flex: 1 0 auto;
+  padding: 0 10px;
   align-items: center;
   justify-content: center;
   margin: 0 $nut-tabs-title-gap;
   font-size: $tabs-titles-item-font-size;
   color: $tabs-titles-item-color;
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 
@@ -139,6 +135,7 @@
     padding: 0;
     width: $tabs-vertical-titles-width;
     flex-shrink: 0;
+
     .nut-tabs__list {
       width: 100%;
       display: flex;
@@ -197,6 +194,7 @@
       overflow-x: auto;
       overflow-y: hidden;
       height: $tabs-horizontal-titles-height;
+
       .nut-tabs__list {
         width: 100%;
         display: flex;