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

package/dist/cjs/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/cjs/packages/input/input.js

@@ -21,7 +21,6 @@ var _utils = require("./utils");
 var _index = require("../configprovider/index");
 var _typings = require("../../utils/typings");
 var _usepropsvalue = require("../../utils/use-props-value");
-var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     type: 'text',
     name: '',
@@ -106,13 +105,11 @@ var Input = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
     var updateValue = function updateValue(value) {
         var trigger = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'onChange';
         var val = value;
-        if ((0, _taro.getEnv)() === _taro.ENV_TYPE.WEB) {
-            if (type === 'number') {
-                val = (0, _utils.formatNumber)(val, false, true);
-            }
-            if (type === 'digit') {
-                val = (0, _utils.formatNumber)(val, true, true);
-            }
+        if (type === 'number') {
+            val = (0, _utils.formatNumber)(val, false, true);
+        }
+        if (type === 'digit') {
+            val = (0, _utils.formatNumber)(val, true, true);
         }
         if (formatter && trigger === formatTrigger) {
             val = formatter(val);
@@ -182,8 +179,7 @@ var Input = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         onBlur: handleBlur,
         onFocus: handleFocus,
         onInput: function onInput(e) {
-            console.log('eeeeee', e.detail.value);
-            handleInput((e.currentTarget || e.detail).value);
+            handleInput((e.detail || e.currentTarget).value);
         }
     })), /*#__PURE__*/ _react.default.createElement(_components.View, {
         style: {
@@ -198,8 +194,8 @@ var Input = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
                 onClear === null || onClear === void 0 ? void 0 : onClear('');
             }
         }
-    }, clearIcon || (!(0, _platformtaro.harmonyAndRn)() ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.MaskClose, {
+    }, clearIcon || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.MaskClose, {
         className: "nut-input-clear"
-    }) : null)));
+    })));
 });
 Input.displayName = 'NutInput';

package/dist/cjs/packages/input/style/input.scss

@@ -47,3 +47,7 @@
     -webkit-text-fill-color: $input-disabled-color;
   }
 }
+
+.nut-input-clear {
+  flex: 0;
+}

package/dist/cjs/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;
@@ -43,4 +43,8 @@
   background: none;
   opacity: 1;
   -webkit-text-fill-color: var(--nutui-input-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
+
+.nut-input-clear {
+  flex: 0;
 }

package/dist/cjs/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/cjs/packages/inputnumber/inputnumber.js

@@ -31,11 +31,12 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     type: 'digit',
     step: 1,
     digits: 0,
-    async: false
+    async: false,
+    select: true
 });
 var classPrefix = "nut-inputnumber";
 var InputNumber = function InputNumber(props) {
-    var _ref = (0, _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 = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _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 = (0, _object_without_properties._)(_ref, [
         "children",
         "disabled",
         "min",
@@ -48,6 +49,7 @@ var InputNumber = function InputNumber(props) {
         "digits",
         "step",
         "async",
+        "select",
         "className",
         "style",
         "formatter",
@@ -65,11 +67,12 @@ var InputNumber = function InputNumber(props) {
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), focused = _useState[0], setFocused = _useState[1];
     var inputRef = (0, _react.useRef)(null);
     (0, _react.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 = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
@@ -150,8 +153,22 @@ var InputNumber = function InputNumber(props) {
         if (text === '-') return null;
         return text;
     };
+    var clampValue = function clampValue(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 handleValueChange(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 handleInputChange(e) {
-        if (!focused && isHarmony) return;
         // 设置 input 值， 在 blur 时格式化
         setInputValue(e.target.value);
         var valueStr = parseValue(e.target.value);
@@ -162,24 +179,29 @@ var InputNumber = function InputNumber(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 handleFocus(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 handleBlur(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.default.createElement(_components.View, {
         className: classes,

package/dist/cjs/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/cjs/packages/layout/layout.js

@@ -9,12 +9,9 @@ Object.defineProperty(exports, "Layout", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-var _object_spread = require("@swc/helpers/_/_object_spread");
 var _components = require("@tarojs/components");
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
-var defaultProps = {};
-var Layout = function Layout(props) {
-    var children = (0, _object_spread._)({}, defaultProps, props).children;
+var Layout = function Layout() {
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "nut-layout"
     }, "Layout");

package/dist/cjs/packages/loading/loading.js

@@ -15,6 +15,7 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _iconsreacttaro = require("@nutui/icons-react-taro");
+var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 // 方便以后扩展设置为键值对形式
 var loadingMap = {
@@ -36,14 +37,14 @@ var Loading = function Loading(props) {
     ]);
     var classPrefix = 'nut-loading';
     var CurLoadingIcon = loadingMap[rest.type] || _iconsreacttaro.Loading1;
-    return /*#__PURE__*/ _react.default.createElement("div", {
+    return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)(classPrefix, direction === 'vertical' ? "".concat(classPrefix, "-vertical") : '', className),
         style: style
-    }, /*#__PURE__*/ _react.default.createElement("div", {
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-icon-box")
     }, icon || /*#__PURE__*/ _react.default.createElement(CurLoadingIcon, {
         className: "".concat(classPrefix, "-icon")
-    })), children ? /*#__PURE__*/ _react.default.createElement("div", {
+    })), children ? /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-text")
     }, children) : '');
 };

package/dist/cjs/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/cjs/packages/menu/menu.js

@@ -18,6 +18,7 @@ var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _iconsreacttaro = require("@nutui/icons-react-taro");
+var _components = require("@tarojs/components");
 var _menuitem = require("../menuitem/menuitem");
 var _typings = require("../../utils/typings");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
@@ -44,16 +45,22 @@ var Menu = function Menu(props) {
         "onOpen"
     ]);
     var menuRef = (0, _react.useRef)(null);
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isScrollFixed = _useState[0], setIsScrollFixed = _useState[1];
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)([]), 2), showMenuItem = _useState[0], setShowMenuItem = _useState[1];
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), menuItemTitle = _useState1[0], setMenuItemTitle = _useState1[1];
+    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(false), 2), isScrollFixed = _useState2[0], setIsScrollFixed = _useState2[1];
+    var cls = (0, _classnames.default)("nut-menu", className, {
+        'scroll-fixed': isScrollFixed
+    });
     var getScrollTop = function getScrollTop(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 onScroll() {
-        var scrollFixed = props.scrollFixed;
+    var onScroll = (0, _react.useCallback)(function() {
         var scrollTop = getScrollTop(window);
         var isFixed = scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed));
         setIsScrollFixed(isFixed);
-    };
+    }, [
+        scrollFixed
+    ]);
     (0, _react.useEffect)(function() {
         if (scrollFixed) {
             window.addEventListener('scroll', onScroll);
@@ -61,9 +68,10 @@ var Menu = function Menu(props) {
         return function() {
             return window.removeEventListener('scroll', onScroll);
         };
-    }, []);
-    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), showMenuItem = _useState1[0], setShowMenuItem = _useState1[1];
-    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), menuItemTitle = _useState2[0], setMenuItemTitle = _useState2[1];
+    }, [
+        scrollFixed,
+        onScroll
+    ]);
     var toggleMenuItem = function toggleMenuItem(index) {
         var from = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'NORMAL';
         showMenuItem[index] = !showMenuItem[index];
@@ -108,7 +116,7 @@ var Menu = function Menu(props) {
     var menuTitle = function menuTitle() {
         return _react.default.Children.map(children, function(child, index) {
             if (/*#__PURE__*/ _react.default.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);
                 });
@@ -118,8 +126,21 @@ var Menu = function Menu(props) {
                     if (selected && selected.length && selected[0].text) return selected[0].text;
                     return '';
                 };
-                return /*#__PURE__*/ _react.default.createElement("div", {
-                    className: (0, _classnames.default)('nut-menu-title ', {
+                var finallyIcon = function finallyIcon() {
+                    if (titleIcon) return titleIcon;
+                    if (icon) return icon;
+                    return direction === 'up' ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowUp, {
+                        className: "nut-menu-title-icon",
+                        width: "12px",
+                        height: "12px"
+                    }) : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowDown, {
+                        className: "nut-menu-title-icon",
+                        width: "12px",
+                        height: "12px"
+                    });
+                };
+                return /*#__PURE__*/ _react.default.createElement(_components.View, {
+                    className: (0, _classnames.default)('nut-menu-title ', "nut-menu-title-".concat(index), {
                         active: showMenuItem[index],
                         disabled: disabled
                     }, className),
@@ -131,25 +152,17 @@ var Menu = function Menu(props) {
                         if ((!options || !options.length) && !child.props.children) return;
                         !disabled && toggleMenuItem(index);
                     }
-                }, /*#__PURE__*/ _react.default.createElement("div", {
+                }, /*#__PURE__*/ _react.default.createElement(_components.View, {
                     className: "nut-menu-title-text"
-                }, finallyTitle()), icon || (direction === 'up' ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowUp, {
-                    className: "nut-menu-title-icon",
-                    size: "12px"
-                }) : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowDown, {
-                    className: "nut-menu-title-icon",
-                    size: "12px"
-                })));
+                }, finallyTitle()), finallyIcon());
             }
             return null;
         });
     };
-    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
-        className: (0, _classnames.default)("nut-menu", className, {
-            'scroll-fixed': isScrollFixed
-        }),
+    return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
+        className: cls,
         ref: menuRef
-    }), /*#__PURE__*/ _react.default.createElement("div", {
+    }), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)('nut-menu-bar', {
             opened: showMenuItem.includes(true)
         })

package/dist/cjs/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/cjs/packages/menuitem/menuitem.d.ts

@@ -6,6 +6,7 @@ export interface OptionItem {
 }
 export interface MenuItemProps extends BasicComponent {
     title: React.ReactNode;
+    titleIcon: React.ReactNode;
     options: OptionItem[];
     disabled: boolean;
     columns: number;

package/dist/cjs/packages/menuitem/menuitem.js

@@ -27,6 +27,7 @@ var _getrectbytaro = require("../../utils/get-rect-by-taro");
 var _typings = require("../../utils/typings");
 var _usepropsvalue = require("../../utils/use-props-value");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    titleIcon: null,
     columns: 1,
     direction: 'down',
     icon: null,
@@ -51,15 +52,43 @@ var MenuItem = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
             onChange === null || onChange === void 0 ? void 0 : onChange(option);
         }
     }), 2), innerValue = _usePropsValue[0], setValue = _usePropsValue[1];
+    var cssRef = (0, _react.useRef)(null);
     (0, _react.useEffect)(function() {
         setShowPopup(show);
     }, [
         show
     ]);
+    var getParentOffset = (0, _react.useCallback)(function() {
+        setTimeout(/*#__PURE__*/ (0, _async_to_generator._)(function() {
+            var p, rect;
+            return (0, _ts_generator._)(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        p = parent.menuRef.current;
+                        return [
+                            4,
+                            (0, _getrectbytaro.getRectByTaro)(p)
+                        ];
+                    case 1:
+                        rect = _state.sent();
+                        setPosition({
+                            height: rect.height,
+                            top: rect.top
+                        });
+                        return [
+                            2
+                        ];
+                }
+            });
+        }), 100);
+    }, [
+        parent.menuRef
+    ]);
     (0, _react.useEffect)(function() {
         getParentOffset();
     }, [
-        showPopup
+        showPopup,
+        getParentOffset
     ]);
     var windowHeight = (0, _react.useMemo)(function() {
         return (0, _taro.getSystemInfoSync)().windowHeight;
@@ -77,7 +106,9 @@ var MenuItem = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         });
     }, [
         direction,
-        windowHeight
+        windowHeight,
+        parent.lockScroll,
+        parent.menuRef
     ]);
     (0, _taro.usePageScroll)(updateItemOffset);
     (0, _react.useImperativeHandle)(ref, function() {
@@ -106,30 +137,6 @@ var MenuItem = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         top: 0,
         height: 0
     }), 2), position = _useState1[0], setPosition = _useState1[1];
-    var getParentOffset = function getParentOffset() {
-        setTimeout(/*#__PURE__*/ (0, _async_to_generator._)(function() {
-            var p, rect;
-            return (0, _ts_generator._)(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        p = parent.menuRef.current;
-                        return [
-                            4,
-                            (0, _getrectbytaro.getRectByTaro)(p)
-                        ];
-                    case 1:
-                        rect = _state.sent();
-                        setPosition({
-                            height: rect.height,
-                            top: rect.top
-                        });
-                        return [
-                            2
-                        ];
-                }
-            });
-        }), 100);
-    };
     var isShow = function isShow() {
         if (showPopup) return {};
         return {
@@ -184,6 +191,7 @@ var MenuItem = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
         }, className),
         style: (0, _object_spread._)({}, style, isShow())
     }, /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
+        nodeRef: cssRef,
         in: showPopup,
         timeout: 100,
         classNames: direction === 'down' ? 'nut-menu-container-down' : 'nut-menu-container-up'
@@ -201,12 +209,14 @@ var MenuItem = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
             onClick: function onClick() {
                 handleClick(item);
             }
-        }, item.value === innerValue ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, icon || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Check, {
+        }, item.value === innerValue ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, icon ? /*#__PURE__*/ _react.default.cloneElement(icon, {
+            className: "nut-menu-container-item-icon ".concat(icon.props.className || '')
+        }) : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Check, {
             color: activeColor,
             size: 16,
-            className: getIconCName(item.value, value)
+            className: "nut-menu-container-item-icon ".concat(getIconCName(item.value, value))
         })) : null, /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: getIconCName(item.value, value),
+            className: "nut-menu-container-item-title ".concat(getIconCName(item.value, value)),
             style: {
                 color: "".concat(item.value === innerValue ? activeColor : '')
             }