@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.1

package/dist/es/packages/infiniteloading/infiniteloading.js

@@ -1,14 +1,16 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import React, { useState, useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
-import { ScrollView } from "@tarojs/components";
+import { ScrollView, View } from "@tarojs/components";
 import { createSelectorQuery } from "@tarojs/taro";
 import { useConfig } from "../configprovider/configprovider";
 import { ComponentDefaults } from "../../utils/typings";
+import pxTransform from "../../utils/px-transform";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     type: 'default',
     hasMore: true,
@@ -18,8 +20,31 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 var classPrefix = "nut-infiniteloading";
 export var InfiniteLoading = function(props) {
+    var getBottomTipsText = function getBottomTipsText() {
+        if (isInfiniting) {
+            return loadingText || locale.infiniteloading.loadText;
+        }
+        if (!hasMore) {
+            return loadMoreText || locale.infiniteloading.loadMoreText;
+        }
+        return null;
+    };
     var locale = useConfig().locale;
-    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, type = _$_object_spread.type, hasMore = _$_object_spread.hasMore, threshold = _$_object_spread.threshold, target = _$_object_spread.target, pullRefresh = _$_object_spread.pullRefresh, pullingText = _$_object_spread.pullingText, loadingText = _$_object_spread.loadingText, loadMoreText = _$_object_spread.loadMoreText, className = _$_object_spread.className, onRefresh = _$_object_spread.onRefresh, onLoadMore = _$_object_spread.onLoadMore, onScroll = _$_object_spread.onScroll;
+    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, type = _ref.type, hasMore = _ref.hasMore, threshold = _ref.threshold, target = _ref.target, pullRefresh = _ref.pullRefresh, pullingText = _ref.pullingText, loadingText = _ref.loadingText, loadMoreText = _ref.loadMoreText, className = _ref.className, onRefresh = _ref.onRefresh, onLoadMore = _ref.onLoadMore, onScroll = _ref.onScroll, rest = _object_without_properties(_ref, [
+        "children",
+        "type",
+        "hasMore",
+        "threshold",
+        "target",
+        "pullRefresh",
+        "pullingText",
+        "loadingText",
+        "loadMoreText",
+        "className",
+        "onRefresh",
+        "onLoadMore",
+        "onScroll"
+    ]);
     var _useState = _sliced_to_array(useState(false), 2), isInfiniting = _useState[0], setIsInfiniting = _useState[1];
     var _useState1 = _sliced_to_array(useState(0), 2), topDisScoll = _useState1[0], setTopDisScoll = _useState1[1];
     var refreshTop = useRef(null);
@@ -32,12 +57,16 @@ export var InfiniteLoading = function(props) {
     var classes = classNames(classPrefix, className, "".concat(classPrefix, "-").concat(type));
     useEffect(function() {
         refreshMaxH.current = threshold;
-        setTimeout(function() {
+        var timer = setTimeout(function() {
             getScrollHeight();
         }, 200);
+        return function() {
+            return clearTimeout(timer);
+        };
     }, [
         hasMore,
-        isInfiniting
+        isInfiniting,
+        threshold
     ]);
     /** 获取需要滚动的距离 */ var getScrollHeight = function() {
         var parentElement = getParentElement('scroller');
@@ -48,7 +77,7 @@ export var InfiniteLoading = function(props) {
     };
     var getStyle = function() {
         return {
-            height: topDisScoll < 0 ? "0px" : "".concat(topDisScoll, "px"),
+            height: topDisScoll < 0 ? pxTransform(0) : pxTransform(topDisScoll),
             transition: "height 0.2s cubic-bezier(0.25,0.1,0.25,1)"
         };
     };
@@ -72,7 +101,7 @@ export var InfiniteLoading = function(props) {
         }
         onScroll && onScroll(e.target.scrollTop);
     };
-    var lower = function() {
+    var lower = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function() {
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
@@ -122,7 +151,7 @@ export var InfiniteLoading = function(props) {
             isTouching.current = false;
         }
     };
-    var touchEnd = function() {
+    var touchEnd = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function() {
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
@@ -158,7 +187,7 @@ export var InfiniteLoading = function(props) {
             return _ref.apply(this, arguments);
         };
     }();
-    return /*#__PURE__*/ React.createElement(ScrollView, {
+    return /*#__PURE__*/ React.createElement(ScrollView, _object_spread_props(_object_spread({}, rest), {
         className: classes,
         scrollY: true,
         id: "scroller",
@@ -171,20 +200,18 @@ export var InfiniteLoading = function(props) {
         onTouchStart: touchStart,
         onTouchMove: touchMove,
         onTouchEnd: touchEnd
-    }, /*#__PURE__*/ React.createElement("div", {
+    }), /*#__PURE__*/ React.createElement(View, {
         className: "nut-infinite-top",
         ref: refreshTop,
         style: getStyle()
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "nut-infinite-top-tips"
-    }, pullingText || locale.infiniteloading.pullRefreshText)), /*#__PURE__*/ React.createElement("div", {
+    }, pullingText || locale.infiniteloading.pullRefreshText)), /*#__PURE__*/ React.createElement(View, {
         className: "nut-infinite-container"
-    }, children), /*#__PURE__*/ React.createElement("div", {
+    }, children), /*#__PURE__*/ React.createElement(View, {
         className: "nut-infinite-bottom"
-    }, isInfiniting ? /*#__PURE__*/ React.createElement("div", {
-        className: "nut-infinite-bottom-tips"
-    }, loadingText || locale.infiniteloading.loadText) : !hasMore && /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "nut-infinite-bottom-tips"
-    }, loadMoreText || locale.infiniteloading.loadMoreText)));
+    }, getBottomTipsText())));
 };
 InfiniteLoading.displayName = 'NutInfiniteLoading';

package/dist/es/packages/infiniteloading/style/infiniteloading.scss

@@ -8,7 +8,7 @@
     justify-content: center;
     width: 100%;
     overflow: hidden;
-    font-size: $font-size-small;
+    font-size: $font-size-s;
     color: $infiniteloading-color;
 
     &-tips {
@@ -33,7 +33,7 @@
     justify-content: center;
     width: 100%;
     padding-top: 6px;
-    font-size: $font-size-small;
+    font-size: $font-size-s;
     color: $infiniteloading-color;
     text-align: center;
 

package/dist/es/packages/infiniteloading/style/style.css

@@ -8,8 +8,8 @@
   justify-content: center;
   width: 100%;
   overflow: hidden;
-  font-size: var(--nutui-font-size-2, 12px);
-  color: var(--nutui-infiniteloading-color, var(--nutui-gray-5, #888b94));
+  font-size: var(--nutui-font-size-s, 12px);
+  color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94));
 }
 .nut-infiniteloading .nut-infinite-top-tips {
   width: 100%;
@@ -30,8 +30,8 @@
   justify-content: center;
   width: 100%;
   padding-top: 6px;
-  font-size: var(--nutui-font-size-2, 12px);
-  color: var(--nutui-infiniteloading-color, var(--nutui-gray-5, #888b94));
+  font-size: var(--nutui-font-size-s, 12px);
+  color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94));
   text-align: center;
 }
 .nut-infiniteloading .nut-infinite-bottom-tips {

package/dist/es/packages/input/input.js

@@ -95,13 +95,11 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
     var updateValue = function(value) {
         var trigger = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'onChange';
         var val = value;
-        if (getEnv() === ENV_TYPE.WEB) {
-            if (type === 'number') {
-                val = formatNumber(val, false, true);
-            }
-            if (type === 'digit') {
-                val = formatNumber(val, true, true);
-            }
+        if (type === 'number') {
+            val = formatNumber(val, false, true);
+        }
+        if (type === 'digit') {
+            val = formatNumber(val, true, true);
         }
         if (formatter && trigger === formatTrigger) {
             val = formatter(val);

package/dist/es/packages/input/style/style.css

@@ -7,11 +7,11 @@
   align-items: center;
   padding: var(--nutui-input-padding, 10px 25px);
   line-height: 24px;
-  font-size: var(--nutui-input-font-size, var(--nutui-font-size-3, 14px));
+  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;
   border-radius: var(--nutui-input-border-radius, 0);
-  background-color: var(--nutui-input-background-color, var(--nutui-gray-1, #ffffff));
-  border-bottom: var(--nutui-input-border-bottom-width, 0px) solid var(--nutui-input-border-bottom, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
+  background-color: var(--nutui-input-background-color, var(--nutui-color-background-overlay, #ffffff));
+  border-bottom: var(--nutui-input-border-bottom-width, 0px) solid var(--nutui-input-border-bottom, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-input .nut-icon {
   color: #c8c9cc;
@@ -19,8 +19,8 @@
 
 .nut-input-native {
   flex: 1;
-  color: var(--nutui-input-color, var(--nutui-gray-7, #1a1a1a));
-  font-size: var(--nutui-input-font-size, var(--nutui-font-size-3, 14px));
+  color: var(--nutui-input-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
   padding: 0;
   border: 0;
   outline: 0 none;

package/dist/es/packages/inputnumber/inputnumber.d.ts

@@ -13,10 +13,11 @@ export interface InputNumberProps extends BasicComponent {
     step: number;
     digits: number;
     async: boolean;
+    select: boolean;
     formatter?: (value?: string | number) => string;
     onPlus: (e: ITouchEvent) => void;
     onMinus: (e: ITouchEvent) => void;
-    onOverlimit: (e: ITouchEvent) => void;
+    onOverlimit: (e: ITouchEvent | ChangeEvent<HTMLInputElement>) => void;
     onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
     onFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (param: string | number, e: ITouchEvent | ChangeEvent<HTMLInputElement>) => void;

package/dist/es/packages/inputnumber/inputnumber.js

@@ -19,11 +19,12 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     type: 'digit',
     step: 1,
     digits: 0,
-    async: false
+    async: false,
+    select: true
 });
 var classPrefix = "nut-inputnumber";
 export var InputNumber = function(props) {
-    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, disabled = _ref.disabled, min = _ref.min, max = _ref.max, type = _ref.type, readOnly = _ref.readOnly, value = _ref.value, defaultValue = _ref.defaultValue, allowEmpty = _ref.allowEmpty, digits = _ref.digits, step = _ref.step, async = _ref.async, className = _ref.className, style = _ref.style, formatter = _ref.formatter, onPlus = _ref.onPlus, onMinus = _ref.onMinus, onOverlimit = _ref.onOverlimit, onBlur = _ref.onBlur, onFocus = _ref.onFocus, onChange = _ref.onChange, restProps = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, disabled = _ref.disabled, min = _ref.min, max = _ref.max, type = _ref.type, readOnly = _ref.readOnly, value = _ref.value, defaultValue = _ref.defaultValue, allowEmpty = _ref.allowEmpty, digits = _ref.digits, step = _ref.step, async = _ref.async, select = _ref.select, className = _ref.className, style = _ref.style, formatter = _ref.formatter, onPlus = _ref.onPlus, onMinus = _ref.onMinus, onOverlimit = _ref.onOverlimit, onBlur = _ref.onBlur, onFocus = _ref.onFocus, onChange = _ref.onChange, restProps = _object_without_properties(_ref, [
         "children",
         "disabled",
         "min",
@@ -36,6 +37,7 @@ export var InputNumber = function(props) {
         "digits",
         "step",
         "async",
+        "select",
         "className",
         "style",
         "formatter",
@@ -53,11 +55,12 @@ export var InputNumber = function(props) {
     var _useState = _sliced_to_array(useState(false), 2), focused = _useState[0], setFocused = _useState[1];
     var inputRef = useRef(null);
     useEffect(function() {
-        if (focused) {
+        if (select && focused) {
             var _inputRef_current_select, _inputRef_current;
             (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : (_inputRef_current_select = _inputRef_current.select) === null || _inputRef_current_select === void 0 ? void 0 : _inputRef_current_select.call(_inputRef_current);
         }
     }, [
+        select,
         focused
     ]);
     var _usePropsValue = _sliced_to_array(usePropsValue({
@@ -138,8 +141,22 @@ export var InputNumber = function(props) {
         if (text === '-') return null;
         return text;
     };
+    var clampValue = function(valueStr) {
+        if (valueStr === null) return defaultValue;
+        var val = Number(parseFloat(valueStr || '0').toFixed(digits));
+        return Math.max(Number(min), Math.min(Number(max), val));
+    };
+    var handleValueChange = function(valueStr, e) {
+        var val = clampValue(valueStr);
+        // input暂不触发onOverlimit
+        // if (val !== Number(e.target.value)) {
+        //   onOverlimit?.(e)
+        // }
+        if (val !== Number(shadowValue)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(val, e);
+        }
+    };
     var handleInputChange = function(e) {
-        if (!focused && isHarmony) return;
         // 设置 input 值， 在 blur 时格式化
         setInputValue(e.target.value);
         var valueStr = parseValue(e.target.value);
@@ -150,24 +167,29 @@ export var InputNumber = function(props) {
                 setShadowValue(defaultValue);
             }
         } else {
-            setShadowValue(valueStr);
-        }
-        if (!async) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(parseFloat(valueStr || '0').toFixed(digits), e);
+            setShadowValue(clampValue(valueStr));
         }
+        !async && handleValueChange(valueStr, e);
     };
     var handleFocus = function(e) {
         setFocused(true);
         setInputValue(shadowValue !== undefined && shadowValue !== null ? bound(Number(shadowValue), Number(min), Number(max)).toString() : '');
-        onFocus && onFocus(e);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
     };
     var handleBlur = function(e) {
         setFocused(false);
-        onBlur && onBlur(e);
-        if (async) {
-            var valueStr = parseValue(e.target.value);
-            onChange === null || onChange === void 0 ? void 0 : onChange(parseFloat(valueStr || '0').toFixed(digits), e);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        var valueStr = parseValue(e.target.value);
+        if (valueStr === null) {
+            if (allowEmpty) {
+                setShadowValue(null);
+            } else {
+                setShadowValue(defaultValue);
+            }
+        } else {
+            setShadowValue(clampValue(valueStr));
         }
+        async && handleValueChange(valueStr, e);
     };
     return /*#__PURE__*/ React.createElement(View, {
         className: classes,

package/dist/es/packages/inputnumber/style/style.css

@@ -13,7 +13,7 @@
   border-radius: var(--nutui-inputnumber-button-border-radius, 16px);
 }
 .nut-inputnumber-icon {
-  color: var(--nutui-inputnumber-icon-color, var(--nutui-gray-6, #505259));
+  color: var(--nutui-inputnumber-icon-color, var(--nutui-color-text, #505259));
   /*  #ifdef rn harmony  */
   font-size: 14px;
   /*  #endif  */
@@ -37,8 +37,8 @@
   border: var(--nutui-inputnumber-input-border, 0);
   border-radius: var(--nutui-inputnumber-input-border-radius, 6px);
   margin: var(--nutui-inputnumber-input-margin, 0);
-  color: var(--nutui-inputnumber-input-font-color, var(--nutui-gray-7, #1a1a1a));
-  background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-gray-3, #f5f6fa));
+  color: var(--nutui-inputnumber-input-font-color, var(--nutui-color-title, #1a1a1a));
+  background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-background, #f5f6fa));
 }
 .nut-inputnumber-input-disabled {
   color: var(--nutui-inputnumber-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));

package/dist/es/packages/layout/layout.js

@@ -1,9 +1,6 @@
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { View } from "@tarojs/components";
 import React from "react";
-var defaultProps = {};
-export var Layout = function(props) {
-    var children = _object_spread({}, defaultProps, props).children;
+export var Layout = function() {
     return /*#__PURE__*/ React.createElement(View, {
         className: "nut-layout"
     }, "Layout");

package/dist/es/packages/loading/loading.js

@@ -4,6 +4,7 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import React from "react";
 import classNames from "classnames";
 import { Loading as IconLoading, Loading1 as IconLoading1 } from "@nutui/icons-react-taro";
+import { View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 // 方便以后扩展设置为键值对形式
 var loadingMap = {
@@ -25,14 +26,14 @@ export var Loading = function(props) {
     ]);
     var classPrefix = 'nut-loading';
     var CurLoadingIcon = loadingMap[rest.type] || IconLoading1;
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(View, {
         className: classNames(classPrefix, direction === 'vertical' ? "".concat(classPrefix, "-vertical") : '', className),
         style: style
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-icon-box")
     }, icon || /*#__PURE__*/ React.createElement(CurLoadingIcon, {
         className: "".concat(classPrefix, "-icon")
-    })), children ? /*#__PURE__*/ React.createElement("div", {
+    })), children ? /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-text")
     }, children) : '');
 };

package/dist/es/packages/loading/style/style.css

@@ -14,15 +14,15 @@
   animation: nut-loading-rotation 1s infinite linear;
 }
 .nut-loading .nut-loading-icon-box .nut-loading-icon {
-  color: var(--nutui-loading-icon-color, var(--nutui-gray-5, #888b94));
-  width: var(--nutui-loading-icon-size, var(--nutui-font-size-2, 12px));
-  height: var(--nutui-loading-icon-size, var(--nutui-font-size-2, 12px));
-  font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-2, 12px));
+  color: var(--nutui-loading-icon-color, var(--nutui-color-text-help, #888b94));
+  width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
 }
 .nut-loading .nut-loading-text {
   padding: 8px;
-  color: var(--nutui-loading-color, var(--nutui-gray-5, #888b94));
-  font-size: var(--nutui-loading-font-size, var(--nutui-font-size-2, 12px));
+  color: var(--nutui-loading-color, var(--nutui-color-text-help, #888b94));
+  font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, 12px));
 }
 
 @keyframes nut-loading-rotation {

package/dist/es/packages/menu/menu.js

@@ -3,9 +3,10 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { ArrowDown, ArrowUp } from "@nutui/icons-react-taro";
+import { View } from "@tarojs/components";
 import { MenuItem } from "../menuitem/menuitem";
 import { ComponentDefaults } from "../../utils/typings";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -32,16 +33,22 @@ export var Menu = function(props) {
         "onOpen"
     ]);
     var menuRef = useRef(null);
-    var _useState = _sliced_to_array(useState(false), 2), isScrollFixed = _useState[0], setIsScrollFixed = _useState[1];
+    var _useState = _sliced_to_array(useState([]), 2), showMenuItem = _useState[0], setShowMenuItem = _useState[1];
+    var _useState1 = _sliced_to_array(useState([]), 2), menuItemTitle = _useState1[0], setMenuItemTitle = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(false), 2), isScrollFixed = _useState2[0], setIsScrollFixed = _useState2[1];
+    var cls = classNames("nut-menu", className, {
+        'scroll-fixed': isScrollFixed
+    });
     var getScrollTop = function(el) {
-        return Math.max(0, 'scrollTop' in el ? el.scrollTop : el.pageYOffset);
+        return Math.max(0, el === window ? window.scrollY : el.scrollTop);
     };
-    var onScroll = function() {
-        var scrollFixed = props.scrollFixed;
+    var onScroll = useCallback(function() {
         var scrollTop = getScrollTop(window);
         var isFixed = scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed));
         setIsScrollFixed(isFixed);
-    };
+    }, [
+        scrollFixed
+    ]);
     useEffect(function() {
         if (scrollFixed) {
             window.addEventListener('scroll', onScroll);
@@ -49,9 +56,10 @@ export var Menu = function(props) {
         return function() {
             return window.removeEventListener('scroll', onScroll);
         };
-    }, []);
-    var _useState1 = _sliced_to_array(useState([]), 2), showMenuItem = _useState1[0], setShowMenuItem = _useState1[1];
-    var _useState2 = _sliced_to_array(useState([]), 2), menuItemTitle = _useState2[0], setMenuItemTitle = _useState2[1];
+    }, [
+        scrollFixed,
+        onScroll
+    ]);
     var toggleMenuItem = function(index) {
         var from = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'NORMAL';
         showMenuItem[index] = !showMenuItem[index];
@@ -96,7 +104,7 @@ export var Menu = function(props) {
     var menuTitle = function() {
         return React.Children.map(children, function(child, index) {
             if (/*#__PURE__*/ React.isValidElement(child)) {
-                var _child_props = child.props, title = _child_props.title, options = _child_props.options, value = _child_props.value, defaultValue = _child_props.defaultValue, disabled = _child_props.disabled, direction = _child_props.direction;
+                var _child_props = child.props, title = _child_props.title, titleIcon = _child_props.titleIcon, options = _child_props.options, value = _child_props.value, defaultValue = _child_props.defaultValue, disabled = _child_props.disabled, direction = _child_props.direction;
                 var selected = options === null || options === void 0 ? void 0 : options.filter(function(option) {
                     return option.value === (value !== undefined ? value : defaultValue);
                 });
@@ -106,8 +114,21 @@ export var Menu = function(props) {
                     if (selected && selected.length && selected[0].text) return selected[0].text;
                     return '';
                 };
-                return /*#__PURE__*/ React.createElement("div", {
-                    className: classNames('nut-menu-title ', {
+                var finallyIcon = function() {
+                    if (titleIcon) return titleIcon;
+                    if (icon) return icon;
+                    return direction === 'up' ? /*#__PURE__*/ React.createElement(ArrowUp, {
+                        className: "nut-menu-title-icon",
+                        width: "12px",
+                        height: "12px"
+                    }) : /*#__PURE__*/ React.createElement(ArrowDown, {
+                        className: "nut-menu-title-icon",
+                        width: "12px",
+                        height: "12px"
+                    });
+                };
+                return /*#__PURE__*/ React.createElement(View, {
+                    className: classNames('nut-menu-title ', "nut-menu-title-".concat(index), {
                         active: showMenuItem[index],
                         disabled: disabled
                     }, className),
@@ -119,25 +140,17 @@ export var Menu = function(props) {
                         if ((!options || !options.length) && !child.props.children) return;
                         !disabled && toggleMenuItem(index);
                     }
-                }, /*#__PURE__*/ React.createElement("div", {
+                }, /*#__PURE__*/ React.createElement(View, {
                     className: "nut-menu-title-text"
-                }, finallyTitle()), icon || (direction === 'up' ? /*#__PURE__*/ React.createElement(ArrowUp, {
-                    className: "nut-menu-title-icon",
-                    size: "12px"
-                }) : /*#__PURE__*/ React.createElement(ArrowDown, {
-                    className: "nut-menu-title-icon",
-                    size: "12px"
-                })));
+                }, finallyTitle()), finallyIcon());
             }
             return null;
         });
     };
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, rest), {
-        className: classNames("nut-menu", className, {
-            'scroll-fixed': isScrollFixed
-        }),
+    return /*#__PURE__*/ React.createElement(View, _object_spread_props(_object_spread({}, rest), {
+        className: cls,
         ref: menuRef
-    }), /*#__PURE__*/ React.createElement("div", {
+    }), /*#__PURE__*/ React.createElement(View, {
         className: classNames('nut-menu-bar', {
             opened: showMenuItem.includes(true)
         })

package/dist/es/packages/menu/style/style.css

@@ -11,7 +11,7 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10, rgba(0, 0, 0, 0.7)));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
@@ -24,9 +24,6 @@
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
-.nut-overflow-hidden .taro_page {
-  overflow: hidden !important;
-}
 
 @keyframes nut-fade-in {
   0% {
@@ -67,7 +64,7 @@
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
-  background: var(--nutui-menu-content-background-color, var(--nutui-gray-1, #ffffff));
+  background: var(--nutui-menu-content-background-color, var(--nutui-color-background-overlay, #ffffff));
 }
 .nut-menu-container-content_fixed {
   width: 100%;
@@ -77,12 +74,12 @@
 .nut-menu-container-item {
   display: flex;
   align-items: center;
-  color: var(--nutui-gray-7, #1a1a1a);
-  font-size: var(--nutui-font-size-3, 14px);
+  color: var(--nutui-color-title, #1a1a1a);
+  font-size: var(--nutui-font-size-base, 14px);
   padding: var(--nutui-menu-item-padding, 12px 0);
 }
 .nut-menu-container-item.active {
-  font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 500));
+  font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600));
   color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-menu-container-item .nut-icon {
@@ -184,7 +181,7 @@
   position: relative;
   display: flex;
   line-height: var(--nutui-menu-bar-line-height, 48px);
-  background-color: var(--nutui-gray-1, #ffffff);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
   box-shadow: var(--nutui-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, 0.12));
 }
 .nut-menu-bar.opened {
@@ -194,8 +191,8 @@
 .nut-menu-title {
   flex: 1;
   text-align: center;
-  font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-3, 14px));
-  color: var(--nutui-menu-title-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-menu-title-color, var(--nutui-color-title, #1a1a1a));
   min-width: 0;
   display: flex;
   align-items: center;

package/dist/es/packages/menuitem/menuitem.d.ts

@@ -11,6 +11,11 @@ export interface MenuItemProps extends BasicComponent {
     */
     title: React.ReactNode
     /**
+    * 菜单项 icon
+    * @default ArrowUp/ArrowDown
+    */
+    titleIcon: React.ReactNode
+    /**
     * 选项数组
     * @default -
     */