@nutui/nutui-react 2.0.0-alpha.15 → 2.0.0-alpha.16

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v2.0.0-alpha.16
+`2023-06-09`
+
+* :bug: fix(toast): 修复连续调用 show 方法时无法销毁的问题 (#1102) @Eiinu
+* :bug: fix: dialog 需要增加 overlay 的样式，否则按需加载样式出现异常 (#1103) @oasis-cloud
+* :bug: fix: menu 组件被使用 transform 的组件嵌套后，遮罩层发生偏移 (#1093) @oasis-cloud
+* :bug: fix: noticebar 修复小程序多行展示问题 (#1107) @xiaoyatong
+* :bug: fix: pikcer 在关闭动画未结束时修改 visible，导致状态更新异常 (#1097) @oasis-cloud
+* 🛠 refactor: datepicker (#1091) @xiaoyatong
+* 🔨 chore: 修复 Taro Demo 的字号 (#1105) @oasis-cloud
+* 🔨 chore(script): 生成 Props 功能增强 (#1096) @Eiinu
+* 📖 docs: 文档修订 (#1106) @xiaoyatong
+
+
 # v2.0.0-alpha.15
 `2023-06-07`
 

package/dist/esm/DatePicker.js

@@ -1,8 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["minDate", "maxDate", "type", "isShowChinese", "minuteStep", "modelValue", "visible", "title", "formatter", "onCloseDatePicker", "onConfirmDatePicker", "filter", "onChange", "threeDimensional", "className", "style"];
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["startDate", "endDate", "type", "showChinese", "minuteStep", "visible", "title", "defaultValue", "formatter", "onClose", "onConfirm", "filter", "onChange", "threeDimensional", "className", "style"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -24,32 +24,25 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useRef, useEffect } from "react";
+import React__default, { useState, useEffect } from "react";
 import Picker from "./Picker.js";
 import { useConfig } from "./ConfigProvider.js";
+import { u as usePropsValue } from "./use-props-value.js";
+import { C as ComponentDefaults } from "./typings.js";
 var currentYear = /* @__PURE__ */ (/* @__PURE__ */ new Date()).getFullYear();
-var defaultProps = {
-  modelValue: null,
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   visible: false,
   title: "",
   type: "date",
-  isShowChinese: false,
+  showChinese: false,
   threeDimensional: true,
   minuteStep: 1,
-  minDate: new Date(currentYear - 10, 0, 1),
-  maxDate: new Date(currentYear + 10, 11, 31)
-};
+  startDate: new Date(currentYear - 10, 0, 1),
+  endDate: new Date(currentYear + 10, 11, 31)
+});
 var DatePicker = function DatePicker2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), minDate = _defaultProps$props.minDate, maxDate = _defaultProps$props.maxDate, type = _defaultProps$props.type, isShowChinese = _defaultProps$props.isShowChinese, minuteStep = _defaultProps$props.minuteStep, modelValue = _defaultProps$props.modelValue, visible = _defaultProps$props.visible, title = _defaultProps$props.title, formatter = _defaultProps$props.formatter, onCloseDatePicker = _defaultProps$props.onCloseDatePicker, onConfirmDatePicker = _defaultProps$props.onConfirmDatePicker, filter = _defaultProps$props.filter, onChange = _defaultProps$props.onChange, threeDimensional = _defaultProps$props.threeDimensional, className = _defaultProps$props.className, style = _defaultProps$props.style, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), startDate = _defaultProps$props.startDate, endDate = _defaultProps$props.endDate, type = _defaultProps$props.type, showChinese = _defaultProps$props.showChinese, minuteStep = _defaultProps$props.minuteStep, visible = _defaultProps$props.visible, title = _defaultProps$props.title, defaultValue = _defaultProps$props.defaultValue, formatter = _defaultProps$props.formatter, onClose = _defaultProps$props.onClose, _onConfirm = _defaultProps$props.onConfirm, filter = _defaultProps$props.filter, onChange = _defaultProps$props.onChange, threeDimensional = _defaultProps$props.threeDimensional, className = _defaultProps$props.className, style = _defaultProps$props.style, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), show = _useState2[0], setShow = _useState2[1];
-  var _useState3 = useState(modelValue), _useState4 = _slicedToArray(_useState3, 2), currentDate = _useState4[0], setCurrentDate = _useState4[1];
-  var _useState5 = useState([]), _useState6 = _slicedToArray(_useState5, 2), defaultValue = _useState6[0], setDefaultValue = _useState6[1];
-  var _useState7 = useState([]), _useState8 = _slicedToArray(_useState7, 2), options = _useState8[0], setListData = _useState8[1];
-  var pickerRef = useRef(null);
-  var isDate = function isDate2(val) {
-    return Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
-  };
   var datepickerLang = locale.datepicker;
   var zhCNType = {
     day: datepickerLang.day,
@@ -59,21 +52,33 @@ var DatePicker = function DatePicker2(props) {
     minute: datepickerLang.min,
     seconds: datepickerLang.seconds
   };
+  var _useState = useState([]), _useState2 = _slicedToArray(_useState, 2), defaultValueOfPicker = _useState2[0], setDefaultValueOfPicker = _useState2[1];
+  var _useState3 = useState([]), _useState4 = _slicedToArray(_useState3, 2), options = _useState4[0], setOptions = _useState4[1];
+  var isDate = function isDate2(val) {
+    return Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
+  };
   var formatValue = function formatValue2(value) {
     var cvalue = value;
     if (!cvalue || cvalue && !isDate(cvalue)) {
-      cvalue = minDate;
+      cvalue = startDate;
     }
-    var timestmp = Math.max(cvalue.getTime(), minDate.getTime());
-    timestmp = Math.min(timestmp, maxDate.getTime());
+    var timestmp = Math.max(cvalue.getTime(), startDate.getTime());
+    timestmp = Math.min(timestmp, endDate.getTime());
     return new Date(timestmp);
   };
+  var _usePropsValue = usePropsValue({
+    value: props.value && formatValue(props.value),
+    defaultValue: formatValue(props.defaultValue || null),
+    finalValue: null,
+    onChange: function onChange2(val) {
+    }
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), currentDate = _usePropsValue2[0], setCurrentDate = _usePropsValue2[1];
   function getMonthEndDay(year, month) {
     return new Date(year, month, 0).getDate();
   }
   var getBoundary = function getBoundary2(type2, value) {
     var _ref;
-    var boundary = type2 === "min" ? minDate : maxDate;
+    var boundary = type2 === "min" ? startDate : endDate;
     var year = boundary.getFullYear();
     var month = 1;
     var date = 1;
@@ -100,12 +105,12 @@ var DatePicker = function DatePicker2(props) {
     }
     return _ref = {}, _defineProperty(_ref, "".concat(type2, "Year"), year), _defineProperty(_ref, "".concat(type2, "Month"), month), _defineProperty(_ref, "".concat(type2, "Date"), date), _defineProperty(_ref, "".concat(type2, "Hour"), hour), _defineProperty(_ref, "".concat(type2, "Minute"), minute), _defineProperty(_ref, "".concat(type2, "Seconds"), seconds), _ref;
   };
-  var ranges = function ranges2(date) {
-    var curDate = date || currentDate;
+  var ranges = function ranges2() {
+    var curDate = currentDate;
     if (!curDate)
       return [];
-    var _getBoundary = getBoundary("max", curDate), maxYear = _getBoundary.maxYear, maxDate2 = _getBoundary.maxDate, maxMonth = _getBoundary.maxMonth, maxHour = _getBoundary.maxHour, maxMinute = _getBoundary.maxMinute, maxSeconds = _getBoundary.maxSeconds;
-    var _getBoundary2 = getBoundary("min", curDate), minYear = _getBoundary2.minYear, minDate2 = _getBoundary2.minDate, minMonth = _getBoundary2.minMonth, minHour = _getBoundary2.minHour, minMinute = _getBoundary2.minMinute, minSeconds = _getBoundary2.minSeconds;
+    var _getBoundary = getBoundary("max", curDate), maxYear = _getBoundary.maxYear, maxDate = _getBoundary.maxDate, maxMonth = _getBoundary.maxMonth, maxHour = _getBoundary.maxHour, maxMinute = _getBoundary.maxMinute, maxSeconds = _getBoundary.maxSeconds;
+    var _getBoundary2 = getBoundary("min", curDate), minYear = _getBoundary2.minYear, minDate = _getBoundary2.minDate, minMonth = _getBoundary2.minMonth, minHour = _getBoundary2.minHour, minMinute = _getBoundary2.minMinute, minSeconds = _getBoundary2.minSeconds;
     var result = [{
       type: "year",
       range: [minYear, maxYear]
@@ -114,7 +119,7 @@ var DatePicker = function DatePicker2(props) {
       range: [minMonth, maxMonth]
     }, {
       type: "day",
-      range: [minDate2, maxDate2]
+      range: [minDate, maxDate]
     }, {
       type: "hour",
       range: [minHour, maxHour]
@@ -150,7 +155,7 @@ var DatePicker = function DatePicker2(props) {
     }
     return result;
   };
-  var updateChooseValueCustmer = function updateChooseValueCustmer2(cacheValueData, selectedValue, index) {
+  var updateChooseValueCustmer = function updateChooseValueCustmer2(selectedOptions, selectedValue, index) {
     if (["date", "datetime", "datehour", "month-day", "year-month"].includes(type.toLocaleLowerCase())) {
       var _date;
       var formatDate = [];
@@ -158,10 +163,10 @@ var DatePicker = function DatePicker2(props) {
         formatDate.push(item);
       });
       if (type.toLocaleLowerCase() === "month-day" && formatDate.length < 3) {
-        formatDate.unshift(new Date(modelValue || minDate || maxDate).getFullYear());
+        formatDate.unshift(new Date(defaultValue || startDate || endDate).getFullYear());
       }
       if (type.toLocaleLowerCase() === "year-month" && formatDate.length < 3) {
-        formatDate.push(new Date(modelValue || minDate || maxDate).getDate());
+        formatDate.push(new Date(defaultValue || startDate || endDate).getDate());
       }
       var year = Number(formatDate[0]);
       var month = Number(formatDate[1]) - 1;
@@ -177,7 +182,7 @@ var DatePicker = function DatePicker2(props) {
       var isEqual = (currentDate === null || currentDate === void 0 ? void 0 : currentDate.getTime()) === ((_date = date) === null || _date === void 0 ? void 0 : _date.getTime());
       date && isDate(date) && !isEqual && setCurrentDate(formatValue(date));
     }
-    props.onChange && props.onChange(cacheValueData, selectedValue, index);
+    props.onChange && props.onChange(selectedOptions, selectedValue, index);
   };
   var padZero = function padZero2(num) {
     var targetLength = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 2;
@@ -196,7 +201,7 @@ var DatePicker = function DatePicker2(props) {
       });
     } else {
       var padMin = padZero(value, 2);
-      var fatter = isShowChinese ? zhCNType[type2] : "";
+      var fatter = showChinese ? zhCNType[type2] : "";
       fOption = {
         text: padMin + fatter,
         value: padMin
@@ -205,6 +210,7 @@ var DatePicker = function DatePicker2(props) {
     return fOption;
   };
   var generateValue = function generateValue2(min, max, val, type2, columnIndex) {
+    var _arr$index;
     var cmin = min;
     var arr = [];
     var index = 0;
@@ -219,8 +225,8 @@ var DatePicker = function DatePicker2(props) {
         index++;
       }
     }
-    defaultValue[columnIndex] = arr[index].value;
-    setDefaultValue(_toConsumableArray(defaultValue));
+    defaultValueOfPicker[columnIndex] = (_arr$index = arr[index]) === null || _arr$index === void 0 ? void 0 : _arr$index.value;
+    setDefaultValueOfPicker(_toConsumableArray(defaultValueOfPicker));
     if (props.filter && props.filter(type2, arr)) {
       return props.filter(type2, arr);
     }
@@ -245,43 +251,33 @@ var DatePicker = function DatePicker2(props) {
     }
     return d;
   };
-  var columns = function columns2(date) {
-    var val = ranges(date).map(function(res, columnIndex) {
+  var columns = function columns2() {
+    var val = ranges().map(function(res, columnIndex) {
       return generateValue(res.range[0], res.range[1], getDateIndex(res.type), res.type, columnIndex);
     });
     return val || [];
   };
-  useEffect(function() {
-    setCurrentDate(formatValue(modelValue));
-  }, []);
-  useEffect(function() {
-    setCurrentDate(formatValue(modelValue));
-  }, [modelValue]);
-  useEffect(function() {
-    setShow(visible);
-  }, [visible]);
   useEffect(function() {
     if (currentDate) {
-      setListData(columns());
+      setOptions(columns());
     }
-  }, [currentDate]);
+  }, []);
   return React__default.createElement("div", _objectSpread({
-    className: "nut-datepicker ".concat(className || ""),
+    className: "nut-datepicker ".concat(className),
     style
-  }, rest), options.length > 0 && React__default.createElement(Picker, {
+  }, rest), options.length && React__default.createElement(Picker, {
     title,
-    visible: show,
+    visible,
     options,
-    onClose: onCloseDatePicker,
-    defaultValue,
-    onConfirm: function onConfirm(options2, values) {
-      return onConfirmDatePicker && onConfirmDatePicker(options2, values);
+    onClose,
+    defaultValue: defaultValueOfPicker,
+    onConfirm: function onConfirm(options2, value) {
+      return _onConfirm && _onConfirm(options2, value);
     },
-    onChange: function onChange2(list, value, index) {
-      return updateChooseValueCustmer(list, value, index);
+    onChange: function onChange2(options2, value, index) {
+      return updateChooseValueCustmer(options2, value, index);
     },
-    threeDimensional,
-    ref: pickerRef
+    threeDimensional
   }));
 };
 DatePicker.defaultProps = defaultProps;

package/dist/esm/Dialog/style/index.js

@@ -1,3 +1,4 @@
 import '../../Button/style'
+import '../../Overlay/style'
 
 import '../../../packages/dialog/dialog.scss'

package/dist/esm/Dialog/style/style.css

@@ -1 +1 @@
-.nut-button{position:relative;display:inline-block;flex-shrink:0;height:var(--nutui-button-default-height, 38px);box-sizing:border-box;margin:0;padding:0;line-height:var(--nutui-button-default-line-height, 36px);font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-2, 14px));text-align:center;cursor:pointer;transition:opacity .2s;-webkit-appearance:none;user-select:none;touch-action:manipulation;color:var(--nutui-button-default-color, var(--nutui-gray-1, #1a1a1a));background:var(--nutui-button-default-bg-color, var(--nutui-gray-6, #ffffff));border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-default-border-color, rgb(204, 204, 204))}.nut-button .nut-button-text{margin-left:var(--nutui-button-text-icon-margin-left, 5px)}.nut-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nutui-gray-0, #000000);border:inherit;border-color:var(--nutui-gray-0, #000000);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-button:after{border:none}.nut-button:active:before{opacity:.1}.nut-button__warp{height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:initial}.nut-button--loading:before,.nut-button--disabled:before{display:none}.nut-button--solid{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent}.nut-button.nut-button--none{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent;border-color:transparent}.nut-button--primary{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--primary.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent}.nut-button--primary.nut-button--none{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent;border-color:transparent}.nut-button--info{color:var(--nutui-button-info-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(315deg,rgb(73,143,242) 0%,rgb(73,101,242) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--info.nut-button--outline{color:var(--nutui-button-info-border-color, #496af2);border-color:var(--nutui-button-info-border-color, #496af2);background:transparent}.nut-button--info.nut-button--none{color:var(--nutui-button-info-border-color, #496af2);background:transparent;border-color:transparent}.nut-button--success{color:var(--nutui-button-success-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,rgb(38,191,38) 0%,rgb(39,197,48) 45%,rgb(40,207,63) 83%,rgb(41,212,70) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--success.nut-button--outline{color:var(--nutui-button-success-border-color, rgb(38, 191, 38));border-color:var(--nutui-button-success-border-color, rgb(38, 191, 38));background:transparent}.nut-button--success.nut-button--none{color:var(--nutui-button-success-border-color, rgb(38, 191, 38));background:transparent;border-color:transparent}.nut-button--danger{color:var(--nutui-button-danger-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-danger-background-color, rgb(250, 44, 25));border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--danger.nut-button--outline{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));border-color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));background:transparent}.nut-button--danger.nut-button--none{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));background:transparent;border-color:transparent}.nut-button--warning{color:var(--nutui-button-warning-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,rgb(255,158,13) 0%,rgb(255,167,13) 45%,rgb(255,182,13) 83%,rgb(255,190,13) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--warning.nut-button--outline{color:var(--nutui-button-warning-border-color, rgb(255, 158, 13));border-color:var(--nutui-button-warning-border-color, rgb(255, 158, 13));background:transparent}.nut-button--warning.nut-button--none{color:var(--nutui-button-warning-border-color, rgb(255, 158, 13));background:transparent;border-color:transparent}.nut-button--large{width:100%;height:var(--nutui-button-large-height, 48px);line-height:var(--nutui-button-large-line-height, 46px)}.nut-button--large .text{margin-left:var(--nutui-button-text-icon-large-margin-left, 10px)}.nut-button--normal{padding:var(--nutui-button-default-padding, 0 18px);font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-2, 14px))}.nut-button--small{height:var(--nutui-button-small-height, 28px);line-height:var(--nutui-button-small-line-height, 26px);padding:var(--nutui-button-small-padding, 0 12px);font-size:var(--nutui-button-small-font-size, var(--nutui-font-size-1, 12px))}.nut-button--small .text{margin-left:var(--nutui-button-text-icon-small-margin-left, 2px)}.nut-button--mini{height:var(--nutui-button-mini-height, 24px);line-height:var(--nutui-button-mini-line-height, 1.2);padding:var(--nutui-button-mini-padding, 0 12px);font-size:var(--nutui-button-mini-font-size, var(--nutui-font-size-1, 12px))}.nut-button--mini .text{margin-left:var(--nutui-button-text-icon-mini-margin-left, 1px)}.nut-button--block{display:block;width:100%}.nut-button--disabled{cursor:not-allowed;opacity:var(--nutui-button-disabled-opacity, .68)}.nut-button--loading{cursor:default;opacity:.9}.nut-button--round{border-radius:var(--nutui-button-border-radius, 25px)}.nut-button--square{border-radius:0}.nut-dialog{display:flex;flex-direction:column;align-items:center;width:var(--nutui-dialog-width, 296px);min-height:var(--nutui-dialog-min-height, 156px);padding:var(--nutui-dialog-padding, 28px 24px 16px 24px);box-sizing:border-box}.nut-dialog__outer{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);transition:transform .2s,-webkit-transform .2s;-webkit-overflow-scrolling:touch;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-radius:var(--nutui-dialog-outer-bordder-radius, 20px);z-index:var(--nutui-dialog-outer-z-index, 1200);animation-duration:.3s}.nut-dialog__header{display:block;text-align:center;font-size:var(--nutui-font-size-3, 16px);color:var(--nutui-gray-1, #1a1a1a);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-dialog__content{width:100%;overflow:auto;flex:1;margin:var(--nutui-dialog-content-margin, 20px 0);max-height:var(--nutui-dialog-content-max-height, 268px);line-height:var(--nutui-dialog-content-line-height, 16px);font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-gray-2, #757575);word-wrap:break-word;word-break:break-all;white-space:pre-wrap;text-align:var(--nutui-dialog-content-text-align, center)}.nut-dialog__footer{display:flex;align-items:center;width:100%;justify-content:space-around}.nut-dialog__footer.vertical{flex-direction:column}.nut-dialog__footer.vertical .nut-button{min-width:100%;margin:0}.nut-dialog__footer.vertical .nut-button.nut-dialog__footer-cancel{border:0}.nut-dialog__footer.vertical .nut-button.nut-dialog__footer-ok{margin-top:var(--nutui-dialog-vertical-footer-ok-margin-top, 10px)}.nut-dialog__footer .nut-button{min-width:var(--nutui-dialog-footer-button-min-width, 100px)}.nut-dialog__footer-cancel.nut-dialog__footer-cancel{margin-right:var(--nutui-dialog-footer-cancel-margin-right, 20px)}.nut-dialog__footer-ok{max-width:var(--nutui-dialog-footer-ok-max-width, 128px)}
+.nut-button{position:relative;display:inline-block;flex-shrink:0;height:var(--nutui-button-default-height, 38px);box-sizing:border-box;margin:0;padding:0;line-height:var(--nutui-button-default-line-height, 36px);font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-2, 14px));text-align:center;cursor:pointer;transition:opacity .2s;-webkit-appearance:none;user-select:none;touch-action:manipulation;color:var(--nutui-button-default-color, var(--nutui-gray-1, #1a1a1a));background:var(--nutui-button-default-bg-color, var(--nutui-gray-6, #ffffff));border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-default-border-color, rgb(204, 204, 204))}.nut-button .nut-button-text{margin-left:var(--nutui-button-text-icon-margin-left, 5px)}.nut-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nutui-gray-0, #000000);border:inherit;border-color:var(--nutui-gray-0, #000000);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-button:after{border:none}.nut-button:active:before{opacity:.1}.nut-button__warp{height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:initial}.nut-button--loading:before,.nut-button--disabled:before{display:none}.nut-button--solid{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent}.nut-button.nut-button--none{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent;border-color:transparent}.nut-button--primary{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--primary.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent}.nut-button--primary.nut-button--none{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent;border-color:transparent}.nut-button--info{color:var(--nutui-button-info-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(315deg,rgb(73,143,242) 0%,rgb(73,101,242) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--info.nut-button--outline{color:var(--nutui-button-info-border-color, #496af2);border-color:var(--nutui-button-info-border-color, #496af2);background:transparent}.nut-button--info.nut-button--none{color:var(--nutui-button-info-border-color, #496af2);background:transparent;border-color:transparent}.nut-button--success{color:var(--nutui-button-success-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,rgb(38,191,38) 0%,rgb(39,197,48) 45%,rgb(40,207,63) 83%,rgb(41,212,70) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--success.nut-button--outline{color:var(--nutui-button-success-border-color, rgb(38, 191, 38));border-color:var(--nutui-button-success-border-color, rgb(38, 191, 38));background:transparent}.nut-button--success.nut-button--none{color:var(--nutui-button-success-border-color, rgb(38, 191, 38));background:transparent;border-color:transparent}.nut-button--danger{color:var(--nutui-button-danger-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-danger-background-color, rgb(250, 44, 25));border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--danger.nut-button--outline{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));border-color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));background:transparent}.nut-button--danger.nut-button--none{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));background:transparent;border-color:transparent}.nut-button--warning{color:var(--nutui-button-warning-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,rgb(255,158,13) 0%,rgb(255,167,13) 45%,rgb(255,182,13) 83%,rgb(255,190,13) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--warning.nut-button--outline{color:var(--nutui-button-warning-border-color, rgb(255, 158, 13));border-color:var(--nutui-button-warning-border-color, rgb(255, 158, 13));background:transparent}.nut-button--warning.nut-button--none{color:var(--nutui-button-warning-border-color, rgb(255, 158, 13));background:transparent;border-color:transparent}.nut-button--large{width:100%;height:var(--nutui-button-large-height, 48px);line-height:var(--nutui-button-large-line-height, 46px)}.nut-button--large .text{margin-left:var(--nutui-button-text-icon-large-margin-left, 10px)}.nut-button--normal{padding:var(--nutui-button-default-padding, 0 18px);font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-2, 14px))}.nut-button--small{height:var(--nutui-button-small-height, 28px);line-height:var(--nutui-button-small-line-height, 26px);padding:var(--nutui-button-small-padding, 0 12px);font-size:var(--nutui-button-small-font-size, var(--nutui-font-size-1, 12px))}.nut-button--small .text{margin-left:var(--nutui-button-text-icon-small-margin-left, 2px)}.nut-button--mini{height:var(--nutui-button-mini-height, 24px);line-height:var(--nutui-button-mini-line-height, 1.2);padding:var(--nutui-button-mini-padding, 0 12px);font-size:var(--nutui-button-mini-font-size, var(--nutui-font-size-1, 12px))}.nut-button--mini .text{margin-left:var(--nutui-button-text-icon-mini-margin-left, 1px)}.nut-button--block{display:block;width:100%}.nut-button--disabled{cursor:not-allowed;opacity:var(--nutui-button-disabled-opacity, .68)}.nut-button--loading{cursor:default;opacity:.9}.nut-button--round{border-radius:var(--nutui-button-border-radius, 25px)}.nut-button--square{border-radius:0}.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overflow-hidden{overflow:hidden!important}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-dialog{display:flex;flex-direction:column;align-items:center;width:var(--nutui-dialog-width, 296px);min-height:var(--nutui-dialog-min-height, 156px);padding:var(--nutui-dialog-padding, 28px 24px 16px 24px);box-sizing:border-box}.nut-dialog__outer{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);transition:transform .2s,-webkit-transform .2s;-webkit-overflow-scrolling:touch;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-radius:var(--nutui-dialog-outer-bordder-radius, 20px);z-index:var(--nutui-dialog-outer-z-index, 1200);animation-duration:.3s}.nut-dialog__header{display:block;text-align:center;font-size:var(--nutui-font-size-3, 16px);color:var(--nutui-gray-1, #1a1a1a);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-dialog__content{width:100%;overflow:auto;flex:1;margin:var(--nutui-dialog-content-margin, 20px 0);max-height:var(--nutui-dialog-content-max-height, 268px);line-height:var(--nutui-dialog-content-line-height, 16px);font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-gray-2, #757575);word-wrap:break-word;word-break:break-all;white-space:pre-wrap;text-align:var(--nutui-dialog-content-text-align, center)}.nut-dialog__footer{display:flex;align-items:center;width:100%;justify-content:space-around}.nut-dialog__footer.vertical{flex-direction:column}.nut-dialog__footer.vertical .nut-button{min-width:100%;margin:0}.nut-dialog__footer.vertical .nut-button.nut-dialog__footer-cancel{border:0}.nut-dialog__footer.vertical .nut-button.nut-dialog__footer-ok{margin-top:var(--nutui-dialog-vertical-footer-ok-margin-top, 10px)}.nut-dialog__footer .nut-button{min-width:var(--nutui-dialog-footer-button-min-width, 100px)}.nut-dialog__footer-cancel.nut-dialog__footer-cancel{margin-right:var(--nutui-dialog-footer-cancel-margin-right, 20px)}.nut-dialog__footer-ok{max-width:var(--nutui-dialog-footer-ok-max-width, 128px)}

package/dist/esm/Menu/style/style.css

@@ -1 +1 @@
-.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overflow-hidden{overflow:hidden!important}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-menu-item__content{padding:var(--nutui-menu-item-content-padding, 12px 24px);max-height:var(--nutui-menu-item-content-max-height, 214px);overflow-y:auto;display:flex;flex-wrap:wrap;background:var(--nutui-menu-item-content-bg-color, var(--nutui-gray-6, #ffffff))}.nut-menu-item__content_fixed{width:100%;opacity:0;position:fixed}.nut-menu-item__option{color:var(--nutui-gray-1, #1a1a1a);font-size:var(--nutui-font-size-2, 14px);padding-top:var(--nutui-menu-item-option-padding-top, 12px);padding-bottom:var(--nutui-menu-item-option-padding-bottom, 12px);display:flex;align-items:center}.nut-menu-item__option.active{font-weight:500;color:var(--nutui-menu-item-active-text-color, var(--nutui-brand-color, #fa2c19))}.nut-menu-item__option i{margin-right:var(--nutui-menu-item-option-i-margin-right, 6px);display:inline-flex;align-items:center}.nut-menu-item__wrap,.nut-menu-item__wrap-up{position:absolute;width:100%;z-index:2052;overflow:hidden}.nut-menu-item__wrap-up{bottom:var(--nutui-menu-bar-line-height, 48px)}.overlay-fade-enter-active.nut-menu__overlay{top:auto;z-index:2052}.nut-menu__pop.nut-popup{transition:all 0s ease 0s;transform:none}.placeholder-element{position:fixed;top:-var(--nutui-menu-bar-line-height,48px);left:0;right:0;z-index:var(--nutui-menu-bar-opened-z-index, 2001);background-color:transparent}.placeholder-element.up{bottom:-var(--nutui-menu-bar-line-height,48px)}.menu-item-enter{opacity:0;transform:translateY(-30px)}.menu-item-enter-done{opacity:1;transform:translate(0);transition:all .1s}.menu-item-exit{opacity:1;transition:all .1s}.menu-item-exit-done{opacity:0;transition:all .1s}.menu-item-up-enter{opacity:0;transform:translateY(30px)}.menu-item-up-enter-done{opacity:1;transform:translate(0);transition:all .1s}.menu-item-up-exit{opacity:1;transition:all .1s}.menu-item-up-exit-done{opacity:0;transition:all .1s}.nut-menu.scroll-fixed{position:fixed;top:var(--nutui-menu-scroll-fixed-top, 0);z-index:var(--nutui-menu-scroll-fixed-z-index, 1000);width:100%}.nut-menu-relative{position:relative}.nut-menu__bar{position:relative;display:flex;line-height:var(--nutui-menu-bar-line-height, 48px);background-color:var(--nutui-gray-6, #ffffff);box-shadow:var(--nutui-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, .12))}.nut-menu__bar.opened{z-index:var(--nutui-menu-bar-opened-z-index, 2001)}.nut-menu__item{flex:1;text-align:center;font-size:var(--nutui-menu-item-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-menu-item-text-color, var(--nutui-gray-1, #1a1a1a));min-width:0}.nut-menu__item.active{color:var(--nutui-menu-item-active-text-color, var(--nutui-brand-color, #fa2c19))}.nut-menu__item.disabled{color:var(--nutui-menu-item-disabled-color, #969799)}.nut-menu__title-icon{transition:all .2s linear}.nut-menu__title{display:flex;align-items:center;justify-content:center;max-width:100%}.nut-menu__title.active .nut-menu__title-icon{transform:rotate(180deg)}.nut-menu__title-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;padding-left:var(--nutui-menu-title-text-padding-left, 8px);padding-right:var(--nutui-menu-title-text-padding-right, 8px)}
+.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overflow-hidden{overflow:hidden!important}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-menu-item__content{padding:var(--nutui-menu-item-content-padding, 12px 24px);max-height:var(--nutui-menu-item-content-max-height, 214px);overflow-y:auto;display:flex;flex-wrap:wrap;background:var(--nutui-menu-item-content-bg-color, var(--nutui-gray-6, #ffffff))}.nut-menu-item__content_fixed{width:100%;opacity:0;position:fixed}.nut-menu-item__option{color:var(--nutui-gray-1, #1a1a1a);font-size:var(--nutui-font-size-2, 14px);padding-top:var(--nutui-menu-item-option-padding-top, 12px);padding-bottom:var(--nutui-menu-item-option-padding-bottom, 12px);display:flex;align-items:center}.nut-menu-item__option.active{font-weight:500;color:var(--nutui-menu-item-active-text-color, var(--nutui-brand-color, #fa2c19))}.nut-menu-item__option i{margin-right:var(--nutui-menu-item-option-i-margin-right, 6px);display:inline-flex;align-items:center}.nut-menu-item__wrap,.nut-menu-item__wrap-up{position:absolute;width:100%;z-index:2052;overflow:hidden}.nut-menu-item__wrap-up{bottom:var(--nutui-menu-bar-line-height, 48px)}.overlay-fade-enter-active.nut-menu__overlay{top:auto;z-index:2052}.nut-menu__pop.nut-popup{transition:all 0s ease 0s;transform:none}.placeholder-element{position:absolute;top:-var(--nutui-menu-bar-line-height,48px);left:0;right:0;z-index:var(--nutui-menu-bar-opened-z-index, 2001);background-color:transparent}.placeholder-element.up{bottom:-var(--nutui-menu-bar-line-height,48px)}.menu-item-enter{opacity:0;transform:translateY(-30px)}.menu-item-enter-done{opacity:1;transform:translate(0);transition:all .1s}.menu-item-exit{opacity:1;transition:all .1s}.menu-item-exit-done{opacity:0;transition:all .1s}.menu-item-up-enter{opacity:0;transform:translateY(30px)}.menu-item-up-enter-done{opacity:1;transform:translate(0);transition:all .1s}.menu-item-up-exit{opacity:1;transition:all .1s}.menu-item-up-exit-done{opacity:0;transition:all .1s}.nut-menu.scroll-fixed{position:fixed;top:var(--nutui-menu-scroll-fixed-top, 0);z-index:var(--nutui-menu-scroll-fixed-z-index, 1000);width:100%}.nut-menu-relative{position:relative}.nut-menu__bar{position:relative;display:flex;line-height:var(--nutui-menu-bar-line-height, 48px);background-color:var(--nutui-gray-6, #ffffff);box-shadow:var(--nutui-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, .12))}.nut-menu__bar.opened{z-index:var(--nutui-menu-bar-opened-z-index, 2001)}.nut-menu__item{flex:1;text-align:center;font-size:var(--nutui-menu-item-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-menu-item-text-color, var(--nutui-gray-1, #1a1a1a));min-width:0}.nut-menu__item.active{color:var(--nutui-menu-item-active-text-color, var(--nutui-brand-color, #fa2c19))}.nut-menu__item.disabled{color:var(--nutui-menu-item-disabled-color, #969799)}.nut-menu__title-icon{transition:all .2s linear}.nut-menu__title{display:flex;align-items:center;justify-content:center;max-width:100%}.nut-menu__title.active .nut-menu__title-icon{transform:rotate(180deg)}.nut-menu__title-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;padding-left:var(--nutui-menu-title-text-padding-left, 8px);padding-right:var(--nutui-menu-title-text-padding-right, 8px)}

package/dist/esm/Menu.js

@@ -67,6 +67,7 @@ var Menu = function Menu2(props) {
   };
   var hideMenuItem = function hideMenuItem2(index) {
     showMenuItem[index] = false;
+    console.log(_toConsumableArray(showMenuItem));
     setShowMenuItem(_toConsumableArray(showMenuItem));
   };
   var updateTitle = function updateTitle2(text, index) {
@@ -75,7 +76,7 @@ var Menu = function Menu2(props) {
   };
   var cloneChildren = function cloneChildren2() {
     return React__default.Children.map(children, function(child, index) {
-      return React__default.cloneElement(child, {
+      return React__default.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
         show: showMenuItem[index],
         index,
         activeColor,
@@ -87,7 +88,7 @@ var Menu = function Menu2(props) {
           hideMenuItem,
           menuRef
         }
-      });
+      }));
     });
   };
   var menuTitle = function menuTitle2() {
@@ -115,7 +116,8 @@ var Menu = function Menu2(props) {
             color: showMenuItem[index] ? activeColor : ""
           },
           key: index,
-          onClick: function onClick() {
+          onClick: function onClick(e) {
+            e.stopPropagation();
             !disabled && toggleMenuItem(index);
           }
         }, React__default.createElement("div", {

package/dist/esm/MenuItem/style/style.css

@@ -1 +1 @@
-.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overflow-hidden{overflow:hidden!important}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-menu-item__content{padding:var(--nutui-menu-item-content-padding, 12px 24px);max-height:var(--nutui-menu-item-content-max-height, 214px);overflow-y:auto;display:flex;flex-wrap:wrap;background:var(--nutui-menu-item-content-bg-color, var(--nutui-gray-6, #ffffff))}.nut-menu-item__content_fixed{width:100%;opacity:0;position:fixed}.nut-menu-item__option{color:var(--nutui-gray-1, #1a1a1a);font-size:var(--nutui-font-size-2, 14px);padding-top:var(--nutui-menu-item-option-padding-top, 12px);padding-bottom:var(--nutui-menu-item-option-padding-bottom, 12px);display:flex;align-items:center}.nut-menu-item__option.active{font-weight:500;color:var(--nutui-menu-item-active-text-color, var(--nutui-brand-color, #fa2c19))}.nut-menu-item__option i{margin-right:var(--nutui-menu-item-option-i-margin-right, 6px);display:inline-flex;align-items:center}.nut-menu-item__wrap,.nut-menu-item__wrap-up{position:absolute;width:100%;z-index:2052;overflow:hidden}.nut-menu-item__wrap-up{bottom:var(--nutui-menu-bar-line-height, 48px)}.overlay-fade-enter-active.nut-menu__overlay{top:auto;z-index:2052}.nut-menu__pop.nut-popup{transition:all 0s ease 0s;transform:none}.placeholder-element{position:fixed;top:-var(--nutui-menu-bar-line-height,48px);left:0;right:0;z-index:var(--nutui-menu-bar-opened-z-index, 2001);background-color:transparent}.placeholder-element.up{bottom:-var(--nutui-menu-bar-line-height,48px)}.menu-item-enter{opacity:0;transform:translateY(-30px)}.menu-item-enter-done{opacity:1;transform:translate(0);transition:all .1s}.menu-item-exit{opacity:1;transition:all .1s}.menu-item-exit-done{opacity:0;transition:all .1s}.menu-item-up-enter{opacity:0;transform:translateY(30px)}.menu-item-up-enter-done{opacity:1;transform:translate(0);transition:all .1s}.menu-item-up-exit{opacity:1;transition:all .1s}.menu-item-up-exit-done{opacity:0;transition:all .1s}
+.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overflow-hidden{overflow:hidden!important}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-menu-item__content{padding:var(--nutui-menu-item-content-padding, 12px 24px);max-height:var(--nutui-menu-item-content-max-height, 214px);overflow-y:auto;display:flex;flex-wrap:wrap;background:var(--nutui-menu-item-content-bg-color, var(--nutui-gray-6, #ffffff))}.nut-menu-item__content_fixed{width:100%;opacity:0;position:fixed}.nut-menu-item__option{color:var(--nutui-gray-1, #1a1a1a);font-size:var(--nutui-font-size-2, 14px);padding-top:var(--nutui-menu-item-option-padding-top, 12px);padding-bottom:var(--nutui-menu-item-option-padding-bottom, 12px);display:flex;align-items:center}.nut-menu-item__option.active{font-weight:500;color:var(--nutui-menu-item-active-text-color, var(--nutui-brand-color, #fa2c19))}.nut-menu-item__option i{margin-right:var(--nutui-menu-item-option-i-margin-right, 6px);display:inline-flex;align-items:center}.nut-menu-item__wrap,.nut-menu-item__wrap-up{position:absolute;width:100%;z-index:2052;overflow:hidden}.nut-menu-item__wrap-up{bottom:var(--nutui-menu-bar-line-height, 48px)}.overlay-fade-enter-active.nut-menu__overlay{top:auto;z-index:2052}.nut-menu__pop.nut-popup{transition:all 0s ease 0s;transform:none}.placeholder-element{position:absolute;top:-var(--nutui-menu-bar-line-height,48px);left:0;right:0;z-index:var(--nutui-menu-bar-opened-z-index, 2001);background-color:transparent}.placeholder-element.up{bottom:-var(--nutui-menu-bar-line-height,48px)}.menu-item-enter{opacity:0;transform:translateY(-30px)}.menu-item-enter-done{opacity:1;transform:translate(0);transition:all .1s}.menu-item-exit{opacity:1;transition:all .1s}.menu-item-exit-done{opacity:0;transition:all .1s}.menu-item-up-enter{opacity:0;transform:translateY(30px)}.menu-item-up-enter-done{opacity:1;transform:translate(0);transition:all .1s}.menu-item-up-exit{opacity:1;transition:all .1s}.menu-item-up-exit-done{opacity:0;transition:all .1s}

package/dist/esm/MenuItem.js

@@ -21,17 +21,18 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { forwardRef, useState, useEffect, useImperativeHandle } from "react";
+import React__default, { forwardRef, useState, useEffect, useImperativeHandle, useRef } from "react";
 import classNames from "classnames";
 import { CSSTransition } from "react-transition-group";
 import { Check } from "@nutui/icons-react";
 import { O as Overlay } from "./overlay2.js";
+import { u as useClickAway } from "./use-click-away.js";
 import { C as ComponentDefaults } from "./typings.js";
+import "./index.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   columns: 1,
   direction: "down",
   icon: null,
-  closeOnClickAway: false,
   activeTitleClass: "",
   inactiveTitleClass: "",
   onChange: function onChange(value) {
@@ -45,9 +46,6 @@ var MenuItem = forwardRef(function(props, ref) {
   useEffect(function() {
     setShowPopup(show);
   }, [show]);
-  useEffect(function() {
-    getParentOffset();
-  }, [_showPopup]);
   useImperativeHandle(ref, function() {
     return {
       toggle: parent.toggleMenuItem
@@ -68,20 +66,6 @@ var MenuItem = forwardRef(function(props, ref) {
     setValue(item.value);
     onChange2 && onChange2(item);
   };
-  var _useState5 = useState({
-    top: 0,
-    height: 0
-  }), _useState6 = _slicedToArray(_useState5, 2), position = _useState6[0], setPosition = _useState6[1];
-  var getParentOffset = function getParentOffset2() {
-    setTimeout(function() {
-      var p = parent.menuRef.current;
-      var rect = p.getBoundingClientRect();
-      setPosition({
-        height: rect.height,
-        top: rect.top
-      });
-    });
-  };
   var isShow = function isShow2() {
     if (_showPopup)
       return {};
@@ -91,34 +75,37 @@ var MenuItem = forwardRef(function(props, ref) {
   };
   var getPosition = function getPosition2() {
     return direction === "down" ? {
-      top: "".concat(position.top + position.height, "px")
+      position: "absolute",
+      height: "".concat(window.innerHeight, "px")
     } : {
-      bottom: "".concat(window.innerHeight - position.top, "px"),
-      top: "auto"
+      position: "absolute",
+      bottom: "100%",
+      top: "auto",
+      height: "".concat(window.innerHeight, "px")
     };
   };
-  var placeholderStyle = function placeholderStyle2() {
-    if (direction === "down") {
-      return _objectSpread({
-        height: "".concat(position.top + position.height, "px"),
-        top: 0
-      }, isShow());
-    }
-    return _objectSpread({
-      height: "".concat(window.innerHeight - position.top, "px"),
-      bottom: "0px",
-      top: "auto"
-    }, isShow());
-  };
-  return React__default.createElement(React__default.Fragment, null, closeOnClickAway ? React__default.createElement("div", {
-    className: "placeholder-element ".concat(classNames({
-      up: direction === "up"
-    })),
-    style: placeholderStyle(),
-    onClick: function onClick() {
-      return parent.toggleMenuItem(index);
+  var micRef = useRef(null);
+  var targetSet = [micRef.current];
+  useClickAway(
+    function() {
+      parent.hideMenuItem(index);
+    },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    targetSet,
+    "click",
+    _showPopup,
+    closeOnClickAway
+  );
+  return React__default.createElement("div", {
+    className: "nut-menu-item-container",
+    ref: micRef,
+    style: {
+      position: "absolute",
+      left: 0,
+      right: 0
     }
-  }) : null, React__default.createElement(Overlay, {
+  }, React__default.createElement(Overlay, {
     className: "nut-menu__overlay",
     style: getPosition(),
     lockScroll: parent.lockScroll,
@@ -139,7 +126,7 @@ var MenuItem = forwardRef(function(props, ref) {
     classNames: direction === "down" ? "menu-item" : "menu-item-up"
   }, React__default.createElement("div", {
     className: "nut-menu-item__content"
-  }, options === null || options === void 0 ? void 0 : options.map(function(item, index2) {
+  }, options === null || options === void 0 ? void 0 : options.map(function(item) {
     return React__default.createElement("div", {
       className: "nut-menu-item__option ".concat(classNames({
         active: item.value === _value

package/dist/esm/NoticeBar.js

@@ -370,7 +370,7 @@ var NoticeBar = function NoticeBar2(props) {
     onClick: handleClick
   }, leftIcon ? React__default.createElement("div", {
     className: "left-icon"
-  }, leftIcon) : null, children ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  }, leftIcon) : null, children ? React__default.createElement("div", {
     className: "nut-noticebar__inner",
     ref: innerRef
   }, scrollList.current.map(function(item, index) {
@@ -382,7 +382,7 @@ var NoticeBar = function NoticeBar2(props) {
         handleItemClick(e, item);
       }
     }, item);
-  }))) : React__default.createElement("div", {
+  })) : React__default.createElement("div", {
     className: "horseLamp_list",
     style: horseLampStyle
   }, scrollList.current.map(function(item, index) {

package/dist/esm/Picker.js

@@ -425,7 +425,7 @@ var InternalPicker = function InternalPicker2(props, ref) {
   return React__default.createElement(Popup, {
     visible,
     position: "bottom",
-    onClose: function onClose2() {
+    afterClose: function afterClose2() {
       closePicker();
     }
   }, React__default.createElement("div", _objectSpread({

package/dist/esm/Popover.js

@@ -23,50 +23,13 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useEffect, useRef, useState } from "react";
+import React__default, { useRef, useState, useEffect } from "react";
 import classNames from "classnames";
 import Popup from "./Popup.js";
 import { g as getRect } from "./use-client-rect.js";
-import { a as isFunction, u as upperCaseFirst } from "./index.js";
+import { u as upperCaseFirst } from "./index.js";
 import { C as ComponentDefaults } from "./typings.js";
-var getTargetElement = function getTargetElement2(target) {
-  var targetElement;
-  if (isFunction(target)) {
-    targetElement = target();
-  } else if ("current" in target) {
-    targetElement = target.current;
-  } else {
-    targetElement = target;
-  }
-  return targetElement;
-};
-function useClickAway(onClickAway, target) {
-  var eventName = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "click";
-  var isListener = arguments.length > 3 ? arguments[3] : void 0;
-  var outerVar = arguments.length > 4 ? arguments[4] : void 0;
-  var handler = function handler2(event) {
-    var targets = Array.isArray(target) ? target : [target];
-    if (targets.some(function(item) {
-      var targetElement = getTargetElement(item);
-      return !targetElement || targetElement.contains(event.target);
-    })) {
-      return;
-    }
-    if (outerVar) {
-      onClickAway();
-    }
-  };
-  useEffect(function() {
-    if (isListener) {
-      window.addEventListener(eventName, handler, true);
-    } else {
-      window.removeEventListener(eventName, handler, true);
-    }
-    return function() {
-      window.removeEventListener(eventName, handler, true);
-    };
-  }, [target]);
-}
+import { u as useClickAway } from "./use-click-away.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   list: [],
   location: "bottom",

package/dist/esm/Popup.js

@@ -138,7 +138,7 @@ var Popup = function Popup2(props) {
     return React__default.createElement(CSSTransition, {
       classNames: transitionName,
       unmountOnExit: true,
-      timeout: 500,
+      timeout: 300,
       "in": innerVisible,
       onEntered: onHandleOpened,
       onExited: onHandleClosed