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

package/dist/esm/Form.js

@@ -1,11 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
-var _excluded = ["children", "onFinish", "onFinishFailed", "labelPosition", "starPositon", "form"];
 function ownKeys(object4, enumerableOnly) {
   var keys = Object.keys(object4);
   if (Object.getOwnPropertySymbols) {
@@ -28,11 +26,11 @@ function _objectSpread(target) {
   return target;
 }
 import React__default, { useRef } from "react";
+import classNames from "classnames";
 import { C as CellGroup } from "./cellgroup2.js";
-import { F as FormItemContext, a as FormItem } from "./formitem2.js";
+import { C as Context, F as FormItem } from "./formitem2.js";
 import { C as ComponentDefaults } from "./typings.js";
-import "classnames";
-import "./Cell.js";
+import Cell from "./Cell.js";
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -1089,21 +1087,31 @@ Schema.validators = validators;
 var FormStore = /* @__PURE__ */ _createClass(function FormStore2() {
   var _this3 = this;
   _classCallCheck(this, FormStore2);
+  _defineProperty(this, "initialValues", {});
   _defineProperty(this, "store", {});
   _defineProperty(this, "fieldEntities", []);
   _defineProperty(this, "callbacks", {});
-  _defineProperty(this, "errList", []);
+  _defineProperty(this, "errors", []);
   _defineProperty(this, "registerField", function(field) {
     _this3.fieldEntities.push(field);
     return function() {
       _this3.fieldEntities = _this3.fieldEntities.filter(function(item) {
         return item != field;
       });
-      delete _this3.store[field.props.name];
+      if (_this3.store) {
+        delete _this3.store[field.props.name];
+      }
     };
   });
   _defineProperty(this, "getFieldValue", function(name) {
-    return _this3.store[name];
+    var _this3$store;
+    return (_this3$store = _this3.store) === null || _this3$store === void 0 ? void 0 : _this3$store[name];
+  });
+  _defineProperty(this, "setInitialValues", function(values, init) {
+    if (init) {
+      _this3.initialValues = values;
+      _this3.store = values;
+    }
   });
   _defineProperty(this, "setFieldsValue", function(newStore) {
     _this3.store = _objectSpread(_objectSpread({}, _this3.store), newStore);
@@ -1111,21 +1119,25 @@ var FormStore = /* @__PURE__ */ _createClass(function FormStore2() {
       var name = enetity.props.name;
       Object.keys(newStore).forEach(function(key) {
         if (key === name) {
-          enetity.onStoreChange();
+          enetity.onStoreChange("update");
         }
       });
     });
   });
+  _defineProperty(this, "setCallback", function(callback) {
+    _this3.callbacks = _objectSpread(_objectSpread({}, _this3.callbacks), callback);
+  });
   _defineProperty(this, "validate", function() {
     var err = [];
-    _this3.errList.length = 0;
+    _this3.errors.length = 0;
     _this3.fieldEntities.forEach(function(entity) {
+      var _this3$store2;
       var _entity$props = entity.props, name = _entity$props.name, _entity$props$rules = _entity$props.rules, rules2 = _entity$props$rules === void 0 ? [] : _entity$props$rules;
       var descriptor = {};
       if (rules2.length) {
         if (rules2.length > 1) {
           descriptor[name] = [];
-          rules2.map(function(v) {
+          rules2.forEach(function(v) {
             descriptor[name].push(v);
           });
         } else {
@@ -1133,38 +1145,38 @@ var FormStore = /* @__PURE__ */ _createClass(function FormStore2() {
         }
       }
       var validator = new Schema(descriptor);
-      validator.validate(_defineProperty({}, name, _this3.store[name]), function(errors) {
+      validator.messages();
+      validator.validate(_defineProperty({}, name, (_this3$store2 = _this3.store) === null || _this3$store2 === void 0 ? void 0 : _this3$store2[name]), function(errors) {
         if (errors) {
-          var _this3$errList;
+          var _this3$errors;
           err.push.apply(err, _toConsumableArray(errors));
-          (_this3$errList = _this3.errList).push.apply(_this3$errList, _toConsumableArray(errors));
+          (_this3$errors = _this3.errors).push.apply(_this3$errors, _toConsumableArray(errors));
         }
-        entity.onStoreChange();
+        entity.onStoreChange("validate");
       });
     });
     return err;
   });
-  _defineProperty(this, "setCallback", function(callback) {
-    _this3.callbacks = _objectSpread(_objectSpread({}, _this3.callbacks), callback);
-  });
   _defineProperty(this, "submit", function() {
-    var err = _this3.validate();
-    if (err.length === 0) {
+    var errors = _this3.validate();
+    if (errors.length === 0) {
       var _this3$callbacks$onFi, _this3$callbacks;
       (_this3$callbacks$onFi = (_this3$callbacks = _this3.callbacks).onFinish) === null || _this3$callbacks$onFi === void 0 ? void 0 : _this3$callbacks$onFi.call(_this3$callbacks, _this3.store);
-    } else if (err.length > 0) {
+    } else if (errors.length > 0) {
       var _this3$callbacks$onFi2, _this3$callbacks2;
-      (_this3$callbacks$onFi2 = (_this3$callbacks2 = _this3.callbacks).onFinishFailed) === null || _this3$callbacks$onFi2 === void 0 ? void 0 : _this3$callbacks$onFi2.call(_this3$callbacks2, err);
+      (_this3$callbacks$onFi2 = (_this3$callbacks2 = _this3.callbacks).onFinishFailed) === null || _this3$callbacks$onFi2 === void 0 ? void 0 : _this3$callbacks$onFi2.call(_this3$callbacks2, _this3.store, errors);
     }
   });
   _defineProperty(this, "resetFields", function() {
-    _this3.errList.length = 0;
-    _this3.fieldEntities.forEach(function(enetity) {
-      enetity.onStoreChange();
+    _this3.errors.length = 0;
+    _this3.store = _this3.initialValues;
+    _this3.fieldEntities.forEach(function(entity) {
+      entity.onStoreChange("reset");
     });
   });
   _defineProperty(this, "getForm", function() {
     return {
+      setInitialValues: _this3.setInitialValues,
       setCallback: _this3.setCallback,
       registerField: _this3.registerField,
       getFieldValue: _this3.getFieldValue,
@@ -1172,12 +1184,12 @@ var FormStore = /* @__PURE__ */ _createClass(function FormStore2() {
       resetFields: _this3.resetFields,
       submit: _this3.submit,
       store: _this3.store,
-      errList: _this3.errList,
+      errors: _this3.errors,
       fieldEntities: _this3.fieldEntities
     };
   });
   this.callbacks = {
-    onFinish: function onFinish2(value) {
+    onFinish: function onFinish2() {
     },
     onFinishFailed: function onFinishFailed2() {
     }
@@ -1196,52 +1208,56 @@ var useForm = function useForm2(form) {
   return [formRef.current];
 };
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  className: "",
-  style: void 0,
-  form: {},
-  labelPosition: "Right",
-  formGroupTitle: "",
-  onFinish: function onFinish(obj) {
+  labelPosition: "right",
+  starPosition: "left",
+  onFinish: function onFinish(values) {
   },
-  onFinishFailed: function onFinishFailed(value) {
-  },
-  starPositon: "Left"
+  onFinishFailed: function onFinishFailed(values, errorFields) {
+  }
 });
 var PositionInfo = {
-  Top: "form-layout-top",
-  Left: "form-layout-left",
-  Right: "form-layout-right"
+  top: "form-layout-top",
+  left: "form-layout-left",
+  right: "form-layout-right"
 };
 var Form = function Form2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, onFinish2 = _defaultProps$props.onFinish, onFinishFailed2 = _defaultProps$props.onFinishFailed, labelPosition = _defaultProps$props.labelPosition, starPositon = _defaultProps$props.starPositon, form = _defaultProps$props.form, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var formInstance = {};
-  if (Object.keys(form).length !== 0) {
+  var classPrefix = "nut-form";
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, footer = _defaultProps$props.footer, children = _defaultProps$props.children, initialValues = _defaultProps$props.initialValues, onFinish2 = _defaultProps$props.onFinish, onFinishFailed2 = _defaultProps$props.onFinishFailed, labelPosition = _defaultProps$props.labelPosition, starPosition = _defaultProps$props.starPosition, form = _defaultProps$props.form;
+  var formInstance;
+  if (form !== void 0) {
     formInstance = form;
   } else {
     var _useForm = useForm();
     var _useForm2 = _slicedToArray(_useForm, 1);
     formInstance = _useForm2[0];
   }
-  formInstance.starPositon = starPositon;
-  var _formInstance = formInstance, setCallback = _formInstance.setCallback, submit = _formInstance.submit, resetFields = _formInstance.resetFields;
+  formInstance.starPosition = starPosition;
+  var _formInstance = formInstance, setCallback = _formInstance.setCallback, submit = _formInstance.submit, resetFields = _formInstance.resetFields, setInitialValues = _formInstance.setInitialValues;
   setCallback({
     onFinish: onFinish2,
     onFinishFailed: onFinishFailed2
   });
+  var mountRef = React__default.useRef(false);
+  setInitialValues(initialValues, !mountRef.current);
+  if (!mountRef.current) {
+    mountRef.current = true;
+  }
   return React__default.createElement("form", {
-    className: "nut-form ".concat(PositionInfo[labelPosition], " ").concat(props.className),
-    style: props.style,
+    className: classNames(classPrefix, className, PositionInfo[labelPosition]),
+    style,
     onSubmit: function onSubmit(e) {
       e.preventDefault();
+      e.stopPropagation();
       submit();
     },
     onReset: function onReset(e) {
       e.preventDefault();
+      e.stopPropagation();
       resetFields();
     }
-  }, React__default.createElement(CellGroup, null, React__default.createElement(FormItemContext.Provider, {
+  }, React__default.createElement(CellGroup, null, React__default.createElement(Context.Provider, {
     value: formInstance
-  }, children)));
+  }, children), footer ? React__default.createElement(Cell, null, footer) : null));
 };
 Form.defaultProps = defaultProps;
 Form.displayName = "NutForm";

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

@@ -1,2 +1,2 @@
-import '../../Cell/style'
+
 import '../../../packages/formitem/formitem.scss'

package/dist/esm/FormItem/style/style.css

@@ -1 +1 @@
-.nut-cell{position:relative;display:flex;width:100%;line-height:var(--nutui-cell-line-height, 20px);padding:var(--nutui-cell-padding, 13px 16px);background-color:var(--nutui-cell-background-color, var(--nutui-gray-6, #ffffff));border-radius:var(--nutui-cell-border-radius, 6px);box-shadow:var(--nutui-cell-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241));font-size:var(--nutui-cell-title-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-cell-title-color, var(--nutui-gray-1, #1a1a1a));margin:10px 0;box-sizing:border-box}.nut-cell__left{display:flex;flex-direction:column;flex:1}.nut-cell__description{font-size:var(--nutui-cell-description-font-size, var(--nutui-font-size-1, 12px));color:var(--nutui-cell-description-color, var(--nutui-gray-2, #757575))}.nut-cell__extra{display:inline-flex;justify-content:flex-end;align-items:center;flex:1;min-width:0;word-break:break-all;font-size:var(--nutui-cell-extra-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-cell-extra-color, var(--nutui-gray-2, #757575))}.nut-theme-dark .nut-form-item__body__slots .nut-input-text{color:#e6e6e6}.nut-form-item{display:flex}.nut-form-item:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:16px;bottom:0;left:16px;transform:scaleX(0)}.nut-form-item.error.line:before{border-bottom:1px solid var(--nutui-form-item-error-line-color, var(--nutui-brand-color, #fa2c19));transform:scaleX(1);transition:transform .2s cubic-bezier(0,0,.2,1) 0ms}.nut-form-item__label{font-size:var(--nutui-form-item-label-font-size, 14px);font-weight:400;width:var(--nutui-form-item-label-width, 90px);margin-right:var(--nutui-form-item-label-margin-right, 10px);flex:none!important;display:inline-block!important;word-wrap:break-word;text-align:var(--nutui-form-item-label-text-align, left)}.nut-form-item__label .required:before{content:"*";color:var(--nutui-form-item-required-color, var(--nutui-brand-color, #fa2c19));margin-right:var(--nutui-form-item-required-margin-right, 4px)}.nut-form-item__body{flex:1;display:flex!important;flex-direction:column}.nut-form-item__body__slots{text-align:var(--nutui-form-item-body-slots-text-align, left)}.nut-form-item__body__slots .nut-input{padding:0;border:0}.nut-form-item__body__slots .nut-input-text{font-size:var(--nutui-form-item-body-font-size, 14px);text-align:var(--nutui-form-item-body-input-text-align, left);color:var(--nutui-gray-0, #000000);width:100%;outline:0 none;border:0;text-decoration:none;background:transparent}.nut-form-item__body__slots .nut-range-container{min-height:24px}.nut-form-item__body__slots .nut-textarea{padding:0!important}.nut-form-item__body__slots .nut-textarea .nut-textarea__textarea{text-align:var(--nutui-form-item-body-input-text-align, left)}.nut-form-item__body__tips{text-align:var(--nutui-form-item-tip-text-align, left);font-size:var(--nutui-form-item-tip-font-size, 10px);color:var(--nutui-form-item-error-message-color, var(--nutui-brand-color, #fa2c19))}
+.nut-form-item{display:flex}.nut-form-item:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:16px;bottom:0;left:16px;transform:scaleX(0)}.nut-form-item.error.line:before{border-bottom:1px solid var(--nutui-form-item-error-line-color, var(--nutui-brand-color, #fa2c19));transform:scaleX(1);transition:transform .2s cubic-bezier(0,0,.2,1) 0ms}.nut-form-item__label{font-size:var(--nutui-form-item-label-font-size, 14px);font-weight:400;width:var(--nutui-form-item-label-width, 90px);margin-right:var(--nutui-form-item-label-margin-right, 10px);flex:none!important;display:inline-block!important;word-wrap:break-word;text-align:var(--nutui-form-item-label-text-align, left)}.nut-form-item__label .required:before{content:"*";color:var(--nutui-form-item-required-color, var(--nutui-brand-color, #fa2c19));margin-right:var(--nutui-form-item-required-margin-right, 4px)}.nut-form-item__body{flex:1;display:flex!important;flex-direction:column}.nut-form-item__body__slots{text-align:var(--nutui-form-item-body-slots-text-align, left)}.nut-form-item__body__slots .nut-input{padding:0;border:0}.nut-form-item__body__slots .nut-input-text{font-size:var(--nutui-form-item-body-font-size, 14px);text-align:var(--nutui-form-item-body-input-text-align, left);color:var(--nutui-gray-0, #000000);width:100%;outline:0 none;border:0;text-decoration:none;background:transparent}.nut-form-item__body__slots .nut-range-container{min-height:24px}.nut-form-item__body__slots .nut-textarea{padding:0!important}.nut-form-item__body__slots .nut-textarea .nut-textarea__textarea{font:inherit;text-align:var(--nutui-form-item-body-input-text-align, left)}.nut-form-item__body__tips{text-align:var(--nutui-form-item-tip-text-align, left);font-size:var(--nutui-form-item-tip-font-size, 10px);color:var(--nutui-form-item-error-message-color, var(--nutui-brand-color, #fa2c19))}

package/dist/esm/FormItem.js

@@ -1,4 +1,4 @@
-import { a as FormItem } from "./formitem2.js";
+import { F as FormItem } from "./formitem2.js";
 import "react";
 import "./Cell.js";
 import "./typings.js";

package/dist/esm/InputNumber.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "disabled", "min", "max", "readonly", "value", "defaultValue", "allowEmpty", "digits", "step", "async", "className", "style", "formatter", "onPlus", "onMinus", "onOverlimit", "onBlur", "onFocus", "onChange"];
+var _excluded = ["children", "disabled", "min", "max", "readOnly", "value", "defaultValue", "allowEmpty", "digits", "step", "async", "className", "style", "formatter", "onPlus", "onMinus", "onOverlimit", "onBlur", "onFocus", "onChange"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -32,7 +32,7 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   disabled: false,
   min: 1,
   max: 9999,
-  readonly: false,
+  readOnly: false,
   allowEmpty: false,
   defaultValue: 0,
   step: 1,
@@ -42,7 +42,7 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
 var classPrefix = "nut-inputnumber";
 var InputNumber = function InputNumber2(props) {
   var _classNames;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, disabled = _defaultProps$props.disabled, min = _defaultProps$props.min, max = _defaultProps$props.max, readonly = _defaultProps$props.readonly, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue, allowEmpty = _defaultProps$props.allowEmpty, digits = _defaultProps$props.digits, step = _defaultProps$props.step, async = _defaultProps$props.async, className = _defaultProps$props.className, style = _defaultProps$props.style, formatter = _defaultProps$props.formatter, onPlus = _defaultProps$props.onPlus, onMinus = _defaultProps$props.onMinus, onOverlimit = _defaultProps$props.onOverlimit, onBlur = _defaultProps$props.onBlur, onFocus = _defaultProps$props.onFocus, onChange = _defaultProps$props.onChange, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, disabled = _defaultProps$props.disabled, min = _defaultProps$props.min, max = _defaultProps$props.max, readOnly = _defaultProps$props.readOnly, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue, allowEmpty = _defaultProps$props.allowEmpty, digits = _defaultProps$props.digits, step = _defaultProps$props.step, async = _defaultProps$props.async, className = _defaultProps$props.className, style = _defaultProps$props.style, formatter = _defaultProps$props.formatter, onPlus = _defaultProps$props.onPlus, onMinus = _defaultProps$props.onMinus, onOverlimit = _defaultProps$props.onOverlimit, onBlur = _defaultProps$props.onBlur, onFocus = _defaultProps$props.onFocus, onChange = _defaultProps$props.onChange, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
   var inputRef = useRef("");
   var _usePropsValue = usePropsValue({
     value,
@@ -175,14 +175,14 @@ var InputNumber = function InputNumber2(props) {
   var focusValue = function focusValue2(e) {
     if (disabled)
       return;
-    if (readonly)
+    if (readOnly)
       return;
     onFocus && onFocus(e);
   };
   var burValue = function burValue2(e) {
     if (disabled)
       return;
-    if (readonly)
+    if (readOnly)
       return;
     var input = e.target;
     var value2 = input.valueAsNumber;
@@ -212,7 +212,7 @@ var InputNumber = function InputNumber2(props) {
     min,
     max,
     disabled,
-    readOnly: readonly,
+    readOnly,
     value: _checked,
     onInput: changeFormatValue,
     onBlur: burFormatValue,
@@ -222,7 +222,7 @@ var InputNumber = function InputNumber2(props) {
     min,
     max,
     disabled,
-    readOnly: readonly,
+    readOnly,
     value: _checked,
     onInput: changeValue,
     onBlur: burValue,

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/Pagination/style/style.css

@@ -1 +1 @@
-.nut-theme-dark .nut-pagination__prev,.nut-theme-dark .nut-pagination__item,.nut-theme-dark .nut-pagination__next{background:#141414;border:1px solid #141414}.nut-theme-dark .nut-pagination-simple{background:#0a0a0a}.nut-theme-dark .nut-pagination .simple-border{border-color:#828282}.nut-theme-dark .nut-pagination .disabled{background-color:#828282;color:var(--nutui-gray-3, #bfbfbf);border:1px solid #828282}.nut-theme-dark .nut-pagination.active{background:var(--nutui-dark-pagination-active-background-color, #fa2c19)}.nut-theme-dark .nut-pagination__contain .nut-pagination__item{background-color:#141414;border:1px solid #0a0a0a}.nut-pagination{display:flex;font-size:var(--nutui-pagination-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-pagination-color, var(--nutui-brand-color, #fa2c19))}.nut-pagination__contain{display:flex}.nut-pagination__simple{height:39px;width:124px;line-height:39px;text-align:center}.nut-pagination__prev,.nut-pagination__item,.nut-pagination__next{height:39px;min-width:39px;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:var(--nutui-gray-6, #ffffff);border-radius:var(--nutui-pagination-item-border-radius, 2px);border:var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, #e4e7eb);cursor:pointer}.nut-pagination__prev,.nut-pagination__item{border-right:none}.nut-pagination__prev,.nut-pagination__next{padding:var(--nutui-pagination-prev-next-padding, 0 11px)}.nut-pagination .simple-border{border-right:var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, #e4e7eb)}.nut-pagination .active{color:var(--nutui-gray-6, #ffffff);border:none;background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%)}.nut-pagination .disabled{color:var(--nutui-pagination-disable-color, var(--nutui-gray-3, #bfbfbf));background-color:var(--nutui-pagination-disable-background-color, #f7f8fa);cursor:not-allowed}
+.nut-pagination{display:flex;font-size:var(--nutui-pagination-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-pagination-color, var(--nutui-brand-color, #fa2c19))}.nut-pagination__contain{display:flex}.nut-pagination__simple{height:39px;width:124px;line-height:39px;text-align:center}.nut-pagination__prev,.nut-pagination__item,.nut-pagination__next{height:39px;min-width:39px;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:var(--nutui-gray-6, #ffffff);border-radius:var(--nutui-pagination-item-border-radius, 2px);border:var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, #e4e7eb);cursor:pointer}.nut-pagination__prev,.nut-pagination__item{border-right:none}.nut-pagination__prev,.nut-pagination__next{padding:var(--nutui-pagination-prev-next-padding, 0 11px)}.nut-pagination .simple-border{border-right:var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, #e4e7eb)}.nut-pagination .active{color:var(--nutui-gray-6, #ffffff);border:none;background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%)}.nut-pagination .disabled{color:var(--nutui-pagination-disable-color, var(--nutui-gray-3, #bfbfbf));background-color:var(--nutui-pagination-disable-background-color, #f7f8fa);cursor:not-allowed}