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

package/dist/nutui.react.es.js

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 var _a;
 /*!
-* @nutui/nutui-react v2.0.0-alpha.15 Wed Jun 07 2023 16:11:56 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.17 Wed Jun 14 2023 16:27:27 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -2402,6 +2402,7 @@ const defaultProps$1r = {
   disabled: false,
   block: false,
   icon: null,
+  nativeType: "button",
   onClick: (e) => {
   }
 };
@@ -2421,6 +2422,7 @@ const Button = React__default.forwardRef(
       onClick,
       className,
       style,
+      nativeType,
       ...rest
     } = {
       ...defaultProps$1r,
@@ -2454,6 +2456,7 @@ const Button = React__default.forwardRef(
         {
           ...rest,
           ref,
+          type: nativeType,
           className: classNames(
             prefixCls,
             className,
@@ -11162,6 +11165,7 @@ const Popup = (props) => {
     }
   };
   const onHandleClickOverlay = (e) => {
+    e.stopPropagation();
     if (closeOnOverlayClick) {
       const closed = onClickOverlay && onClickOverlay(e);
       closed && close();
@@ -11203,7 +11207,7 @@ const Popup = (props) => {
       {
         classNames: transitionName,
         unmountOnExit: true,
-        timeout: 500,
+        timeout: 300,
         in: innerVisible,
         onEntered: onHandleOpened,
         onExited: onHandleClosed
@@ -13816,7 +13820,7 @@ const Cascader = React__default.forwardRef(InternalCascader);
 Cascader.defaultProps = defaultProps$Z;
 Cascader.displayName = "NutCascader";
 const CheckboxGroupContext = createContext(null);
-const Context = CheckboxGroupContext;
+const Context$1 = CheckboxGroupContext;
 const defaultProps$Y = {
   max: void 0,
   labelPosition: "right",
@@ -13887,7 +13891,7 @@ const CheckboxGroup = React__default.forwardRef(
       });
     }, [options2, max]);
     return /* @__PURE__ */ React__default.createElement(
-      Context.Provider,
+      Context$1.Provider,
       {
         value: {
           labelPosition: labelPosition || "right",
@@ -13950,7 +13954,7 @@ const Checkbox = (props) => {
     ...others
   } = props;
   let { labelPosition, ...rest } = others;
-  const ctx2 = useContext(Context);
+  const ctx2 = useContext(Context$1);
   let [innerChecked, setChecked] = usePropsValue({
     value: props.checked,
     defaultValue: props.defaultChecked,
@@ -14331,7 +14335,6 @@ function useRefs() {
 }
 const defaultProps$W = {
   ...ComponentDefaults,
-  visible: false,
   title: "",
   options: [],
   value: [],
@@ -14368,12 +14371,26 @@ const InternalPicker = (props, ref) => {
       (_a2 = props.onConfirm) == null ? void 0 : _a2.call(props, setSelectedOptions(), val);
     }
   });
+  const [innerVisible, setInnerVisible] = usePropsValue({
+    value: props.visible,
+    defaultValue: false,
+    finalValue: false
+  });
   const [innerValue, setInnerValue] = useState(selectedValue);
   const [columnIndex, setColumnIndex] = useState(0);
   const pickerRef = useRef(null);
   const [refs, setRefs] = useRefs();
   const [columnsList, setColumnsList] = useState([]);
   const isConfirmEvent = useRef(false);
+  const actions = {
+    open: () => {
+      setInnerVisible(true);
+    },
+    close: () => {
+      setInnerVisible(false);
+    }
+  };
+  useImperativeHandle(ref, () => actions);
   const formatCascade = (columns, values) => {
     const formatted = [];
     let columnOptions = {
@@ -14435,12 +14452,12 @@ const InternalPicker = (props, ref) => {
   };
   useEffect(() => {
     setInnerValue(innerValue !== selectedValue ? selectedValue : innerValue);
-  }, [visible]);
+  }, [innerVisible]);
   useEffect(() => {
-    if (visible) {
+    if (innerVisible) {
       init();
     }
-  }, [options2, visible]);
+  }, [options2, innerVisible]);
   useEffect(() => {
     onChange && onChange(setSelectedOptions(), innerValue, columnIndex);
   }, [innerValue, columnsList]);
@@ -14513,6 +14530,7 @@ const InternalPicker = (props, ref) => {
     }, 0);
   };
   const closePicker = () => {
+    setInnerVisible(false);
     onClose && onClose(setSelectedOptions(), innerValue);
     afterClose && afterClose(setSelectedOptions(), innerValue, pickerRef);
   };
@@ -14521,21 +14539,34 @@ const InternalPicker = (props, ref) => {
       "span",
       {
         className: `${classPrefix2}__cancel-btn`,
-        onClick: () => closePicker()
+        onClick: (e) => {
+          e.stopPropagation();
+          closePicker();
+        }
       },
       locale.cancel
-    ), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__title` }, title || ""), /* @__PURE__ */ React__default.createElement("span", { className: `${classPrefix2}__confirm-btn`, onClick: confirm2 }, locale.confirm));
+    ), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__title` }, title || ""), /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        className: `${classPrefix2}__confirm-btn`,
+        onClick: (e) => {
+          e.stopPropagation();
+          confirm2();
+        }
+      },
+      locale.confirm
+    ));
   };
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, typeof children === "function" && children(selectedValue), /* @__PURE__ */ React__default.createElement(
     Popup,
     {
-      visible,
+      visible: innerVisible,
       position: "bottom",
-      onClose: () => {
+      afterClose: () => {
         closePicker();
       }
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: classes, style, ...rest }, renderTitleBar(), children, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__panel`, ref: pickerRef }, columnsList == null ? void 0 : columnsList.map((item, index) => {
+    /* @__PURE__ */ React__default.createElement("div", { className: classes, style, ...rest }, renderTitleBar(), typeof children !== "function" && children, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__panel`, ref: pickerRef }, columnsList == null ? void 0 : columnsList.map((item, index) => {
       return /* @__PURE__ */ React__default.createElement(
         PickerPanel$1,
         {
@@ -14550,35 +14581,35 @@ const InternalPicker = (props, ref) => {
         }
       );
     })))
-  );
+  ));
 };
 const Picker = React__default.forwardRef(InternalPicker);
 const Picker$1 = Picker;
 const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
 const defaultProps$V = {
-  modelValue: null,
+  ...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)
 };
 const DatePicker = (props) => {
   const {
-    minDate,
-    maxDate,
+    startDate,
+    endDate,
     type: type4,
-    isShowChinese,
+    showChinese,
     minuteStep,
-    modelValue,
     visible,
     title,
+    defaultValue,
     formatter,
-    onCloseDatePicker,
-    onConfirmDatePicker,
+    onClose,
+    onConfirm,
     filter,
     onChange,
     threeDimensional,
@@ -14590,14 +14621,6 @@ const DatePicker = (props) => {
     ...props
   };
   const { locale } = useConfig();
-  const [show2, setShow] = useState(false);
-  const [currentDate, setCurrentDate] = useState(modelValue);
-  const [defaultValue, setDefaultValue] = useState([]);
-  const [options2, setListData] = useState([]);
-  const pickerRef = useRef(null);
-  const isDate = (val) => {
-    return Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
-  };
   const datepickerLang = locale.datepicker;
   const zhCNType = {
     day: datepickerLang.day,
@@ -14607,20 +14630,32 @@ const DatePicker = (props) => {
     minute: datepickerLang.min,
     seconds: datepickerLang.seconds
   };
+  const [defaultValueOfPicker, setDefaultValueOfPicker] = useState([]);
+  const [options2, setOptions] = useState([]);
+  const isDate = (val) => {
+    return Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
+  };
   const formatValue = (value) => {
     let cvalue = value;
     if (!cvalue || cvalue && !isDate(cvalue)) {
-      cvalue = minDate;
+      cvalue = startDate;
     }
-    let timestmp = Math.max(cvalue.getTime(), minDate.getTime());
-    timestmp = Math.min(timestmp, maxDate.getTime());
+    let timestmp = Math.max(cvalue.getTime(), startDate.getTime());
+    timestmp = Math.min(timestmp, endDate.getTime());
     return new Date(timestmp);
   };
+  const [currentDate, setCurrentDate] = usePropsValue({
+    value: props.value && formatValue(props.value),
+    defaultValue: formatValue(props.defaultValue || null),
+    finalValue: null,
+    onChange: (val) => {
+    }
+  });
   function getMonthEndDay(year, month) {
     return new Date(year, month, 0).getDate();
   }
   const getBoundary = (type22, value) => {
-    const boundary = type22 === "min" ? minDate : maxDate;
+    const boundary = type22 === "min" ? startDate : endDate;
     const year = boundary.getFullYear();
     let month = 1;
     let date4 = 1;
@@ -14654,12 +14689,12 @@ const DatePicker = (props) => {
       [`${type22}Seconds`]: seconds
     };
   };
-  const ranges = (date4) => {
-    const curDate = date4 || currentDate;
+  const ranges = () => {
+    const curDate = currentDate;
     if (!curDate)
       return [];
-    const { maxYear, maxDate: maxDate2, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary("max", curDate);
-    const { minYear, minDate: minDate2, minMonth, minHour, minMinute, minSeconds } = getBoundary("min", curDate);
+    const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary("max", curDate);
+    const { minYear, minDate, minMonth, minHour, minMinute, minSeconds } = getBoundary("min", curDate);
     let result = [
       {
         type: "year",
@@ -14671,7 +14706,7 @@ const DatePicker = (props) => {
       },
       {
         type: "day",
-        range: [minDate2, maxDate2]
+        range: [minDate, maxDate]
       },
       {
         type: "hour",
@@ -14711,7 +14746,7 @@ const DatePicker = (props) => {
     }
     return result;
   };
-  const updateChooseValueCustmer = (cacheValueData, selectedValue, index) => {
+  const updateChooseValueCustmer = (selectedOptions, selectedValue, index) => {
     if (["date", "datetime", "datehour", "month-day", "year-month"].includes(
       type4.toLocaleLowerCase()
     )) {
@@ -14721,11 +14756,13 @@ const DatePicker = (props) => {
       });
       if (type4.toLocaleLowerCase() === "month-day" && formatDate.length < 3) {
         formatDate.unshift(
-          new Date(modelValue || minDate || maxDate).getFullYear()
+          new Date(defaultValue || startDate || endDate).getFullYear()
         );
       }
       if (type4.toLocaleLowerCase() === "year-month" && formatDate.length < 3) {
-        formatDate.push(new Date(modelValue || minDate || maxDate).getDate());
+        formatDate.push(
+          new Date(defaultValue || startDate || endDate).getDate()
+        );
       }
       const year = Number(formatDate[0]);
       const month = Number(formatDate[1]) - 1;
@@ -14750,7 +14787,7 @@ const DatePicker = (props) => {
       const isEqual2 = (currentDate == null ? void 0 : currentDate.getTime()) === (date4 == null ? void 0 : date4.getTime());
       date4 && isDate(date4) && !isEqual2 && setCurrentDate(formatValue(date4));
     }
-    props.onChange && props.onChange(cacheValueData, selectedValue, index);
+    props.onChange && props.onChange(selectedOptions, selectedValue, index);
   };
   const padZero = (num, targetLength = 2) => {
     let str = `${num}`;
@@ -14768,12 +14805,13 @@ const DatePicker = (props) => {
       });
     } else {
       const padMin = padZero(value, 2);
-      const fatter = isShowChinese ? zhCNType[type22] : "";
+      const fatter = showChinese ? zhCNType[type22] : "";
       fOption = { text: padMin + fatter, value: padMin };
     }
     return fOption;
   };
   const generateValue = (min, max, val, type22, columnIndex) => {
+    var _a2;
     let cmin = min;
     const arr = [];
     let index = 0;
@@ -14788,8 +14826,8 @@ const DatePicker = (props) => {
         index++;
       }
     }
-    defaultValue[columnIndex] = arr[index].value;
-    setDefaultValue([...defaultValue]);
+    defaultValueOfPicker[columnIndex] = (_a2 = arr[index]) == null ? void 0 : _a2.value;
+    setDefaultValueOfPicker([...defaultValueOfPicker]);
     if (props.filter && props.filter(type22, arr)) {
       return props.filter(type22, arr);
     }
@@ -14814,8 +14852,8 @@ const DatePicker = (props) => {
     }
     return d;
   };
-  const columns = (date4) => {
-    const val = ranges(date4).map((res, columnIndex) => {
+  const columns = () => {
+    const val = ranges().map((res, columnIndex) => {
       return generateValue(
         res.range[0],
         res.range[1],
@@ -14826,46 +14864,28 @@ const DatePicker = (props) => {
     });
     return val || [];
   };
-  useEffect(() => {
-    setCurrentDate(formatValue(modelValue));
-  }, []);
-  useEffect(() => {
-    setCurrentDate(formatValue(modelValue));
-  }, [modelValue]);
-  useEffect(() => {
-    setShow(visible);
-  }, [visible]);
   useEffect(() => {
     if (currentDate) {
-      setListData(columns());
+      setOptions(columns());
     }
-  }, [currentDate]);
-  return /* @__PURE__ */ React__default.createElement(
-    "div",
+  }, []);
+  return /* @__PURE__ */ React__default.createElement("div", { className: `nut-datepicker ${className}`, style, ...rest }, options2.length && /* @__PURE__ */ React__default.createElement(
+    Picker$1,
     {
-      className: `nut-datepicker ${className || ""}`,
-      style,
-      ...rest
-    },
-    options2.length > 0 && /* @__PURE__ */ React__default.createElement(
-      Picker$1,
-      {
-        title,
-        visible: show2,
-        options: options2,
-        onClose: onCloseDatePicker,
-        defaultValue,
-        onConfirm: (options22, values) => onConfirmDatePicker && onConfirmDatePicker(options22, values),
-        onChange: (list, value, index) => updateChooseValueCustmer(list, value, index),
-        threeDimensional,
-        ref: pickerRef
-      }
-    )
-  );
+      title,
+      visible,
+      options: options2,
+      onClose,
+      defaultValue: defaultValueOfPicker,
+      onConfirm: (options22, value) => onConfirm && onConfirm(options22, value),
+      onChange: (options22, value, index) => updateChooseValueCustmer(options22, value, index),
+      threeDimensional
+    }
+  ));
 };
 DatePicker.defaultProps = defaultProps$V;
 DatePicker.displayName = "NutDatePicker";
-const FormItemContext = createContext({});
+const Context = createContext({});
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -15921,13 +15941,15 @@ Schema.messages = messages;
 Schema.validators = validators;
 class FormStore {
   constructor() {
-    __publicField(this, "store", {});
+    // 初始化数据
+    __publicField(this, "initialValues", {});
     // 存放表单中所有的数据 eg. {password: "ddd",username: "123"}
-    __publicField(this, "fieldEntities", []);
+    __publicField(this, "store", {});
     // 所有的组件实例
-    // 成功和失败的回调
+    __publicField(this, "fieldEntities", []);
+    // 校验成功或失败的回调，onFinish、onFinishFailed
     __publicField(this, "callbacks", {});
-    __publicField(this, "errList", []);
+    __publicField(this, "errors", []);
     /**
      * 注册组件实例
      * @param field
@@ -15936,11 +15958,29 @@ class FormStore {
       this.fieldEntities.push(field);
       return () => {
         this.fieldEntities = this.fieldEntities.filter((item) => item != field);
-        delete this.store[field.props.name];
+        if (this.store) {
+          delete this.store[field.props.name];
+        }
       };
     });
+    /**
+     * 获取 formItem 的值
+     * @param name
+     */
     __publicField(this, "getFieldValue", (name) => {
-      return this.store[name];
+      var _a2;
+      return (_a2 = this.store) == null ? void 0 : _a2[name];
+    });
+    /**
+     * 设置 form 的初始值，之后在 reset 的时候使用
+     * @param values
+     * @param init
+     */
+    __publicField(this, "setInitialValues", (values, init) => {
+      if (init) {
+        this.initialValues = values;
+        this.store = values;
+      }
     });
     /**
      * 存储组件数据
@@ -15955,34 +15995,28 @@ class FormStore {
         const { name } = enetity.props;
         Object.keys(newStore).forEach((key) => {
           if (key === name) {
-            enetity.onStoreChange();
+            enetity.onStoreChange("update");
           }
         });
       });
     });
-    /**
-     * 表单校验
-     * rules: { required: true, message: '' }
-     * descriptor: {
-     *    username: {
-     *      type: 'string',
-     *      required: true,
-     *      validator: (rule, value) => {
-     *        return /^[a-zA-Z0-9]+$/.test(value)
-     *      },
-     *    },
-     *  }
-     */
+    __publicField(this, "setCallback", (callback) => {
+      this.callbacks = {
+        ...this.callbacks,
+        ...callback
+      };
+    });
     __publicField(this, "validate", () => {
       const err = [];
-      this.errList.length = 0;
+      this.errors.length = 0;
       this.fieldEntities.forEach((entity) => {
+        var _a2;
         const { name, rules: rules2 = [] } = entity.props;
         const descriptor = {};
         if (rules2.length) {
           if (rules2.length > 1) {
             descriptor[name] = [];
-            rules2.map((v) => {
+            rules2.forEach((v) => {
               descriptor[name].push(v);
             });
           } else {
@@ -15990,39 +16024,36 @@ class FormStore {
           }
         }
         const validator = new Schema(descriptor);
-        validator.validate({ [name]: this.store[name] }, (errors) => {
+        validator.messages();
+        validator.validate({ [name]: (_a2 = this.store) == null ? void 0 : _a2[name] }, (errors) => {
           if (errors) {
             err.push(...errors);
-            this.errList.push(...errors);
+            this.errors.push(...errors);
           }
-          entity.onStoreChange();
+          entity.onStoreChange("validate");
         });
       });
       return err;
     });
-    __publicField(this, "setCallback", (callback) => {
-      this.callbacks = {
-        ...this.callbacks,
-        ...callback
-      };
-    });
     __publicField(this, "submit", () => {
       var _a2, _b, _c, _d;
-      const err = this.validate();
-      if (err.length === 0) {
+      const errors = this.validate();
+      if (errors.length === 0) {
         (_b = (_a2 = this.callbacks).onFinish) == null ? void 0 : _b.call(_a2, this.store);
-      } else if (err.length > 0) {
-        (_d = (_c = this.callbacks).onFinishFailed) == null ? void 0 : _d.call(_c, err);
+      } else if (errors.length > 0) {
+        (_d = (_c = this.callbacks).onFinishFailed) == null ? void 0 : _d.call(_c, this.store, errors);
       }
     });
     __publicField(this, "resetFields", () => {
-      this.errList.length = 0;
-      this.fieldEntities.forEach((enetity) => {
-        enetity.onStoreChange();
+      this.errors.length = 0;
+      this.store = this.initialValues;
+      this.fieldEntities.forEach((entity) => {
+        entity.onStoreChange("reset");
       });
     });
     __publicField(this, "getForm", () => {
       return {
+        setInitialValues: this.setInitialValues,
         setCallback: this.setCallback,
         registerField: this.registerField,
         getFieldValue: this.getFieldValue,
@@ -16030,12 +16061,12 @@ class FormStore {
         resetFields: this.resetFields,
         submit: this.submit,
         store: this.store,
-        errList: this.errList,
+        errors: this.errors,
         fieldEntities: this.fieldEntities
       };
     });
     this.callbacks = {
-      onFinish: (value) => {
+      onFinish: () => {
       },
       onFinishFailed: () => {
       }
@@ -16054,98 +16085,113 @@ const useForm = (form) => {
   }
   return [formRef.current];
 };
+function isForwardRefComponent(component) {
+  return component.type && component.type.$$typeof && // eslint-disable-next-line react/display-name
+  React__default.forwardRef(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    () => {
+    }
+  ).$$typeof === component.type.$$typeof;
+}
 const defaultProps$U = {
   ...ComponentDefaults,
+  required: false,
   name: "",
   label: "",
-  className: "",
   rules: [{ required: false, message: "" }],
-  disabled: false,
-  labelWidth: 90,
-  errorMessageAlign: "left",
-  showErrorLine: true,
-  showErrorMessage: true,
-  initialValue: ""
+  errorMessageAlign: "left"
 };
 class FormItem extends React__default.Component {
-  constructor() {
-    super(...arguments);
+  constructor(props) {
+    super(props);
     __publicField(this, "cancelRegister");
-    __publicField(this, "isInitialValue", false);
+    __publicField(this, "componentRef");
     // children添加value属性和onChange事件
     __publicField(this, "getControlled", (children) => {
-      var _a2, _b;
-      const { getFieldValue, setFieldsValue } = this.context;
+      var _a2;
+      const { setFieldsValue, getFieldValue } = this.context;
       const { name } = this.props;
-      const type4 = children.type.NAME;
-      const defaultvalue = this.props.initialValue || ((_a2 = children.props) == null ? void 0 : _a2.defaultValue) || ((_b = children.props) == null ? void 0 : _b.value);
-      if (defaultvalue && !this.isInitialValue) {
-        setFieldsValue({ [name]: defaultvalue });
-        this.isInitialValue = true;
-      }
-      return {
-        value: getFieldValue(name),
-        defaultValue: getFieldValue(name),
-        onChange: (event) => {
-          const originOnChange = children.props.onChange;
+      if ((_a2 = children == null ? void 0 : children.props) == null ? void 0 : _a2.defaultValue) {
+        console.warn("通过 initialValue 设置初始值");
+      }
+      const controlled = {
+        ...children.props,
+        [this.props.valuePropName || "value"]: getFieldValue(name) || this.props.initialValue,
+        [this.props.trigger || "onChange"]: (...args) => {
+          const originOnChange = children.props[this.props.trigger || "onChange"];
           if (originOnChange) {
-            originOnChange(event);
+            originOnChange(...args);
           }
-          let newValue = event;
-          switch (type4) {
-            case "checkbox":
-              newValue = event.target.value;
-              break;
+          let [next] = args;
+          if (this.props.getValueFromEvent) {
+            next = this.props.getValueFromEvent(...args);
           }
-          setFieldsValue({ [name]: newValue });
+          setFieldsValue({ [name]: next });
         }
       };
+      if (isForwardRefComponent(children)) {
+        controlled.ref = (componentInstance) => {
+          const originRef = children.ref;
+          if (originRef) {
+            if (typeof originRef === "function") {
+              originRef(componentInstance);
+            }
+            if ("current" in originRef) {
+              originRef.current = componentInstance;
+            }
+          }
+          this.componentRef = componentInstance;
+        };
+      }
+      return controlled;
     });
-    __publicField(this, "onStoreChange", () => {
-      this.forceUpdate();
+    __publicField(this, "refresh", () => {
+      this.setState(({ resetCount }) => ({
+        resetCount: resetCount + 1
+      }));
+    });
+    __publicField(this, "onStoreChange", (type4) => {
+      if (type4 === "reset") {
+        this.refresh();
+      } else {
+        this.forceUpdate();
+      }
     });
     __publicField(this, "renderLayout", (childNode) => {
       var _a2, _b;
-      const {
-        label,
-        name,
-        rules: rules2 = [{ required: false, message: "" }],
-        className,
-        labelWidth,
-        errorMessageAlign,
-        showErrorLine,
-        showErrorMessage
-      } = {
+      const { label, name, required: required4, className, style, errorMessageAlign } = {
         ...defaultProps$U,
         ...this.props
       };
-      const item = ((_a2 = this.context.errList) == null ? void 0 : _a2.length) > 0 && ((_b = this.context.errList) == null ? void 0 : _b.filter((item2) => {
+      const item = ((_a2 = this.context.errors) == null ? void 0 : _a2.length) > 0 && ((_b = this.context.errors) == null ? void 0 : _b.filter((item2) => {
         return item2.field === name;
       }));
-      const { starPositon } = this.context;
-      const renderStar = rules2.length > 0 && rules2[0].required && /* @__PURE__ */ React__default.createElement("i", { className: "required" });
-      const renderLabel = starPositon === "Right" ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, label, renderStar) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderStar, label);
-      return /* @__PURE__ */ React__default.createElement(Cell, { className: `nut-form-item ${className}` }, label ? /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          className: "nut-cell__title nut-form-item__label",
-          style: {
-            width: this.pxCheck(labelWidth)
-          }
-        },
-        renderLabel
-      ) : null, /* @__PURE__ */ React__default.createElement("div", { className: "nut-cell__value nut-form-item__body" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-form-item__body__slots" }, childNode), item.length > 0 && /* @__PURE__ */ React__default.createElement(
-        "div",
+      const { starPosition } = this.context;
+      const renderStar = required4 && /* @__PURE__ */ React__default.createElement("i", { className: "required" });
+      const renderLabel = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, starPosition === "left" ? renderStar : null, label, starPosition === "right" ? renderStar : null);
+      return /* @__PURE__ */ React__default.createElement(
+        Cell,
         {
-          className: "nut-form-item__body__tips",
-          style: { textAlign: errorMessageAlign }
+          className: `nut-form-item ${className}`,
+          style,
+          onClick: (e) => this.props.onClick && this.props.onClick(e, this.componentRef)
         },
-        item[0].message
-      )));
-    });
-    __publicField(this, "pxCheck", (value) => {
-      return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+        label ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-cell__title nut-form-item__label" }, renderLabel) : null,
+        /* @__PURE__ */ React__default.createElement("div", { className: "nut-cell__value nut-form-item__body" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-form-item__body__slots" }, childNode), item.length > 0 && /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            className: "nut-form-item__body__tips",
+            style: { textAlign: errorMessageAlign }
+          },
+          item[0].message
+        ))
+      );
     });
+    this.componentRef = React__default.createRef();
+    this.state = {
+      resetCount: 1
+    };
   }
   componentDidMount() {
     this.cancelRegister = this.context.registerField(this);
@@ -16156,81 +16202,86 @@ class FormItem extends React__default.Component {
     }
   }
   render() {
-    const { children, initialValue } = this.props;
-    const c = Array.isArray(children) ? children[0] : children;
-    let restCNode = c;
-    if (initialValue) {
-      restCNode = React__default.cloneElement(c, {
-        defaultValue: initialValue
-      });
-    }
+    const { children } = this.props;
+    const child = Array.isArray(children) ? children[0] : children;
     const returnChildNode = React__default.cloneElement(
-      restCNode,
-      this.getControlled(restCNode)
+      child,
+      this.getControlled(child)
     );
-    return this.renderLayout(returnChildNode);
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: this.state.resetCount }, this.renderLayout(returnChildNode));
   }
 }
 __publicField(FormItem, "defaultProps", defaultProps$U);
-__publicField(FormItem, "contextType", FormItemContext);
+__publicField(FormItem, "contextType", Context);
 const defaultProps$T = {
   ...ComponentDefaults,
-  className: "",
-  style: void 0,
-  form: {},
-  labelPosition: "Right",
-  formGroupTitle: "",
-  onFinish: (obj) => {
-  },
-  onFinishFailed: (value) => {
+  labelPosition: "right",
+  starPosition: "left",
+  onFinish: (values) => {
   },
-  starPositon: "Left"
+  onFinishFailed: (values, errorFields) => {
+  }
 };
 const 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"
 };
 const Form = (props) => {
+  const classPrefix2 = "nut-form";
   const {
+    className,
+    style,
+    footer,
     children,
+    initialValues,
     onFinish,
     onFinishFailed,
     labelPosition,
-    starPositon,
-    form,
-    ...rest
+    starPosition,
+    form
   } = {
     ...defaultProps$T,
     ...props
   };
-  let formInstance = {};
-  if (Object.keys(form).length !== 0) {
+  let formInstance;
+  if (form !== void 0) {
     formInstance = form;
   } else {
     [formInstance] = useForm();
   }
-  formInstance.starPositon = starPositon;
-  const { setCallback, submit, resetFields } = formInstance;
+  formInstance.starPosition = starPosition;
+  const { setCallback, submit, resetFields, setInitialValues } = formInstance;
   setCallback({
     onFinish,
     onFinishFailed
   });
+  const mountRef = React__default.useRef(false);
+  setInitialValues(initialValues, !mountRef.current);
+  if (!mountRef.current) {
+    mountRef.current = true;
+  }
   return /* @__PURE__ */ React__default.createElement(
     "form",
     {
-      className: `nut-form ${PositionInfo[labelPosition]} ${props.className}`,
-      style: props.style,
+      className: classNames(
+        classPrefix2,
+        className,
+        PositionInfo[labelPosition]
+      ),
+      style,
       onSubmit: (e) => {
         e.preventDefault();
+        e.stopPropagation();
         submit();
       },
       onReset: (e) => {
         e.preventDefault();
+        e.stopPropagation();
         resetFields();
       }
     },
-    /* @__PURE__ */ React__default.createElement(CellGroup, null, /* @__PURE__ */ React__default.createElement(FormItemContext.Provider, { value: formInstance }, children))
+    /* @__PURE__ */ React__default.createElement(CellGroup, null, /* @__PURE__ */ React__default.createElement(Context.Provider, { value: formInstance }, children), footer ? /* @__PURE__ */ React__default.createElement(Cell, null, footer) : null)
   );
 };
 Form.defaultProps = defaultProps$T;
@@ -16446,7 +16497,7 @@ const defaultProps$R = {
   disabled: false,
   min: 1,
   max: 9999,
-  readonly: false,
+  readOnly: false,
   allowEmpty: false,
   defaultValue: 0,
   step: 1,
@@ -16460,7 +16511,7 @@ const InputNumber = (props) => {
     disabled,
     min,
     max,
-    readonly,
+    readOnly,
     value,
     defaultValue,
     allowEmpty,
@@ -16619,14 +16670,14 @@ const InputNumber = (props) => {
   const focusValue = (e) => {
     if (disabled)
       return;
-    if (readonly)
+    if (readOnly)
       return;
     onFocus && onFocus(e);
   };
   const burValue = (e) => {
     if (disabled)
       return;
-    if (readonly)
+    if (readOnly)
       return;
     const input = e.target;
     let value2 = input.valueAsNumber;
@@ -16654,7 +16705,7 @@ const InputNumber = (props) => {
       min,
       max,
       disabled,
-      readOnly: readonly,
+      readOnly,
       value: _checked,
       onInput: changeFormatValue,
       onBlur: burFormatValue,
@@ -16667,7 +16718,7 @@ const InputNumber = (props) => {
       min,
       max,
       disabled,
-      readOnly: readonly,
+      readOnly,
       value: _checked,
       onInput: changeValue,
       onBlur: burValue,
@@ -16727,6 +16778,7 @@ const Menu = (props) => {
   };
   const hideMenuItem = (index) => {
     showMenuItem[index] = false;
+    console.log([...showMenuItem]);
     setShowMenuItem([...showMenuItem]);
   };
   const updateTitle = (text, index) => {
@@ -16736,6 +16788,7 @@ const Menu = (props) => {
   const cloneChildren = () => {
     return React__default.Children.map(children, (child, index) => {
       return React__default.cloneElement(child, {
+        ...child.props,
         show: showMenuItem[index],
         index,
         activeColor,
@@ -16775,7 +16828,8 @@ const Menu = (props) => {
             }),
             style: { color: showMenuItem[index] ? activeColor : "" },
             key: index,
-            onClick: () => {
+            onClick: (e) => {
+              e.stopPropagation();
               !disabled && toggleMenuItem(index);
             }
           },
@@ -16817,12 +16871,59 @@ const Menu = (props) => {
 };
 Menu.defaultProps = defaultProps$Q;
 Menu.displayName = "NutMenu";
+const isObject = (val) => val !== null && typeof val === "object";
+const isFunction = (val) => typeof val === "function";
+const isPromise = (val) => {
+  return isObject(val) && isFunction(val.then) && isFunction(val.catch);
+};
+const upperCaseFirst = (str) => {
+  var str = str.toLowerCase();
+  str = str.replace(
+    /\b\w+\b/g,
+    (word) => word.substring(0, 1).toUpperCase() + word.substring(1)
+  );
+  return str;
+};
+const getTargetElement = (target) => {
+  let targetElement;
+  if (isFunction(target)) {
+    targetElement = target();
+  } else if ("current" in target) {
+    targetElement = target.current;
+  } else {
+    targetElement = target;
+  }
+  return targetElement;
+};
+function useClickAway(onClickAway, target, eventName = "click", isListener, outerVar) {
+  const handler = (event) => {
+    const targets = Array.isArray(target) ? target : [target];
+    if (targets.some((item) => {
+      const targetElement = getTargetElement(item);
+      return !targetElement || targetElement.contains(event.target);
+    })) {
+      return;
+    }
+    if (outerVar) {
+      onClickAway();
+    }
+  };
+  useEffect(() => {
+    if (isListener) {
+      window.addEventListener(eventName, handler, false);
+    } else {
+      window.removeEventListener(eventName, handler, false);
+    }
+    return () => {
+      window.removeEventListener(eventName, handler, true);
+    };
+  }, [target]);
+}
 const defaultProps$P = {
   ...ComponentDefaults,
   columns: 1,
   direction: "down",
   icon: null,
-  closeOnClickAway: false,
   activeTitleClass: "",
   inactiveTitleClass: "",
   onChange: (value) => void 0
@@ -16855,9 +16956,6 @@ const MenuItem = forwardRef((props, ref) => {
   useEffect(() => {
     setShowPopup(show2);
   }, [show2]);
-  useEffect(() => {
-    getParentOffset();
-  }, [_showPopup]);
   useImperativeHandle(ref, () => ({
     toggle: parent.toggleMenuItem
   }));
@@ -16878,119 +16976,108 @@ const MenuItem = forwardRef((props, ref) => {
     setValue(item.value);
     onChange && onChange(item);
   };
-  const [position, setPosition] = useState({
-    top: 0,
-    height: 0
-  });
-  const getParentOffset = () => {
-    setTimeout(() => {
-      const p = parent.menuRef.current;
-      const rect = p.getBoundingClientRect();
-      setPosition({
-        height: rect.height,
-        top: rect.top
-      });
-    });
-  };
   const isShow = () => {
     if (_showPopup)
       return {};
     return { display: "none" };
   };
   const getPosition = () => {
-    return direction === "down" ? { top: `${position.top + position.height}px` } : { bottom: `${window.innerHeight - position.top}px`, top: "auto" };
-  };
-  const placeholderStyle = () => {
-    if (direction === "down") {
-      return {
-        height: `${position.top + position.height}px`,
-        top: 0,
-        ...isShow()
-      };
-    }
-    return {
-      height: `${window.innerHeight - position.top}px`,
-      bottom: `0px`,
+    return direction === "down" ? { position: "absolute", height: `${window.innerHeight}px` } : {
+      position: "absolute",
+      bottom: "100%",
       top: "auto",
-      ...isShow()
+      height: `${window.innerHeight}px`
     };
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, closeOnClickAway ? /* @__PURE__ */ React__default.createElement(
-    "div",
-    {
-      className: `placeholder-element ${classNames({
-        up: direction === "up"
-      })}`,
-      style: placeholderStyle(),
-      onClick: () => parent.toggleMenuItem(index)
-    }
-  ) : null, /* @__PURE__ */ React__default.createElement(
-    Overlay,
-    {
-      className: "nut-menu__overlay",
-      style: getPosition(),
-      lockScroll: parent.lockScroll,
-      visible: _showPopup,
-      closeOnOverlayClick: parent.closeOnOverlayClick,
-      onClick: () => {
-        parent.closeOnOverlayClick && parent.toggleMenuItem(index);
-      }
-    }
-  ), /* @__PURE__ */ React__default.createElement(
+  const micRef = useRef(null);
+  const targetSet = [micRef.current];
+  useClickAway(
+    () => {
+      parent.hideMenuItem(index);
+    },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    targetSet,
+    "click",
+    _showPopup,
+    closeOnClickAway
+  );
+  return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: classNames(className, {
-        "nut-menu-item__wrap": direction === "down",
-        "nut-menu-item__wrap-up": direction !== "down"
-      }),
-      style: {
-        ...style,
-        ...isShow()
-      }
+      className: "nut-menu-item-container",
+      ref: micRef,
+      style: { position: "absolute", left: 0, right: 0 }
     },
     /* @__PURE__ */ React__default.createElement(
-      CSSTransition$1,
+      Overlay,
       {
-        in: _showPopup,
-        timeout: 100,
-        classNames: direction === "down" ? "menu-item" : "menu-item-up"
+        className: "nut-menu__overlay",
+        style: getPosition(),
+        lockScroll: parent.lockScroll,
+        visible: _showPopup,
+        closeOnOverlayClick: parent.closeOnOverlayClick,
+        onClick: () => {
+          parent.closeOnOverlayClick && parent.toggleMenuItem(index);
+        }
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: classNames(className, {
+          "nut-menu-item__wrap": direction === "down",
+          "nut-menu-item__wrap-up": direction !== "down"
+        }),
+        style: {
+          ...style,
+          ...isShow()
+        }
       },
-      /* @__PURE__ */ React__default.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item, index2) => {
-        return /* @__PURE__ */ React__default.createElement(
-          "div",
-          {
-            className: `nut-menu-item__option ${classNames({
-              active: item.value === _value
-            })}`,
-            key: item.text,
-            style: {
-              flexBasis: `${100 / columns}%`
-            },
-            onClick: () => {
-              handleClick2(item);
-            }
-          },
-          item.value === _value ? /* @__PURE__ */ React__default.createElement("i", null, icon || /* @__PURE__ */ React__default.createElement(
-            x$f,
-            {
-              color: activeColor,
-              className: getIconCName(item.value, value)
-            }
-          )) : null,
-          /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React__default.createElement(
+        CSSTransition$1,
+        {
+          in: _showPopup,
+          timeout: 100,
+          classNames: direction === "down" ? "menu-item" : "menu-item-up"
+        },
+        /* @__PURE__ */ React__default.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item) => {
+          return /* @__PURE__ */ React__default.createElement(
             "div",
             {
-              className: getIconCName(item.value, value),
+              className: `nut-menu-item__option ${classNames({
+                active: item.value === _value
+              })}`,
+              key: item.text,
               style: {
-                color: `${item.value === _value ? activeColor : ""}`
+                flexBasis: `${100 / columns}%`
+              },
+              onClick: () => {
+                handleClick2(item);
               }
             },
-            item.text
-          )
-        );
-      }), children)
+            item.value === _value ? /* @__PURE__ */ React__default.createElement("i", null, icon || /* @__PURE__ */ React__default.createElement(
+              x$f,
+              {
+                color: activeColor,
+                className: getIconCName(item.value, value)
+              }
+            )) : null,
+            /* @__PURE__ */ React__default.createElement(
+              "div",
+              {
+                className: getIconCName(item.value, value),
+                style: {
+                  color: `${item.value === _value ? activeColor : ""}`
+                }
+              },
+              item.text
+            )
+          );
+        }), children)
+      )
     )
-  ));
+  );
 });
 MenuItem.defaultProps = defaultProps$P;
 MenuItem.displayName = "NutMenuItem";
@@ -17823,7 +17910,7 @@ const SearchBar = (props) => {
     return /* @__PURE__ */ React__default.createElement(
       "input",
       {
-        className: `${classPrefix2}__input ${shape === "round" ? `${classPrefix2}__round` : ""} ${clearable ? `${classPrefix2}__input-clear` : ""}`,
+        className: `${classPrefix2}__input ${clearable ? `${classPrefix2}__input-clear` : ""}`,
         ref: searchRef,
         style: { ...props.style },
         value: value || "",
@@ -17896,7 +17983,16 @@ const SearchBar = (props) => {
       style: { ...props.style }
     },
     renderLeft(),
-    /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__content` }, renderLeftIn(), renderField(), renderRightIn(), clearable && value && handleClear()),
+    /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: `${classPrefix2}__content ${shape === "round" ? `${classPrefix2}__round` : ""}`
+      },
+      renderLeftIn(),
+      renderField(),
+      renderRightIn(),
+      clearable && value && handleClear()
+    ),
     renderRight()
   );
 };
@@ -18456,19 +18552,6 @@ class Upload {
     }
   }
 }
-const isObject = (val) => val !== null && typeof val === "object";
-const isFunction = (val) => typeof val === "function";
-const isPromise = (val) => {
-  return isObject(val) && isFunction(val.then) && isFunction(val.catch);
-};
-const upperCaseFirst = (str) => {
-  var str = str.toLowerCase();
-  str = str.replace(
-    /\b\w+\b/g,
-    (word) => word.substring(0, 1).toUpperCase() + word.substring(1)
-  );
-  return str;
-};
 const funcInterceptor = (interceptor, {
   args = [],
   done,
@@ -19963,7 +20046,7 @@ const NoticeBar = (props) => {
       onClick: handleClick2
     },
     leftIcon ? /* @__PURE__ */ React__default.createElement("div", { className: "left-icon" }, leftIcon) : null,
-    children ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
+    children ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
       return /* @__PURE__ */ React__default.createElement(
         "div",
         {
@@ -19976,7 +20059,7 @@ const NoticeBar = (props) => {
         },
         item
       );
-    }))) : /* @__PURE__ */ React__default.createElement("div", { className: "horseLamp_list", style: horseLampStyle }, scrollList.current.map((item, index) => {
+    })) : /* @__PURE__ */ React__default.createElement("div", { className: "horseLamp_list", style: horseLampStyle }, scrollList.current.map((item, index) => {
       return (
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
         /* @__PURE__ */ React__default.createElement(
@@ -20170,41 +20253,6 @@ const Notify = {
     }
   }
 };
-const getTargetElement = (target) => {
-  let targetElement;
-  if (isFunction(target)) {
-    targetElement = target();
-  } else if ("current" in target) {
-    targetElement = target.current;
-  } else {
-    targetElement = target;
-  }
-  return targetElement;
-};
-function useClickAway(onClickAway, target, eventName = "click", isListener, outerVar) {
-  const handler = (event) => {
-    const targets = Array.isArray(target) ? target : [target];
-    if (targets.some((item) => {
-      const targetElement = getTargetElement(item);
-      return !targetElement || targetElement.contains(event.target);
-    })) {
-      return;
-    }
-    if (outerVar) {
-      onClickAway();
-    }
-  };
-  useEffect(() => {
-    if (isListener) {
-      window.addEventListener(eventName, handler, true);
-    } else {
-      window.removeEventListener(eventName, handler, true);
-    }
-    return () => {
-      window.removeEventListener(eventName, handler, true);
-    };
-  }, [target]);
-}
 const defaultProps$w = {
   ...ComponentDefaults,
   list: [],
@@ -20352,7 +20400,7 @@ const Popover = (props) => {
     return styles;
   };
   const getRootPosition = () => {
-    let styles = {};
+    const styles = {};
     if (!rootPosition)
       return {};
     const contentWidth = elWidth;
@@ -20362,34 +20410,34 @@ const Popover = (props) => {
     const skew = location.split("-")[1];
     let cross = 0;
     let parallel = 0;
-    if (Array.isArray(offset) && offset.length == 2) {
+    if (Array.isArray(offset) && offset.length === 2) {
       cross += +offset[1];
       parallel += +offset[0];
     }
     if (width) {
       if (["bottom", "top"].includes(direction)) {
-        const h = direction == "bottom" ? height + cross : -(contentHeight + cross);
+        const h = direction === "bottom" ? height + cross : -(contentHeight + cross);
         styles.top = `${top + h}px`;
         if (!skew) {
           styles.left = `${-(contentWidth - width) / 2 + left + parallel}px`;
         }
-        if (skew == "start") {
+        if (skew === "start") {
           styles.left = `${left + parallel}px`;
         }
-        if (skew == "end") {
+        if (skew === "end") {
           styles.left = `${right + parallel}px`;
         }
       }
       if (["left", "right"].includes(direction)) {
-        const contentW = direction == "left" ? -(contentWidth + cross) : width + cross;
+        const contentW = direction === "left" ? -(contentWidth + cross) : width + cross;
         styles.left = `${left + contentW}px`;
         if (!skew) {
           styles.top = `${top - contentHeight / 2 + height / 2 - 4 + parallel}px`;
         }
-        if (skew == "start") {
+        if (skew === "start") {
           styles.top = `${top + parallel}px`;
         }
-        if (skew == "end") {
+        if (skew === "end") {
           styles.top = `${top + height + parallel}px`;
         }
       }
@@ -20841,7 +20889,7 @@ const defaultProps$s = {
   name: ""
 };
 const Swipe = forwardRef((props, instanceRef) => {
-  const swipeBem = cn("swipe");
+  const classPrefix2 = "nut-swipe";
   const touch = useTouch();
   const { children, className, style } = { ...defaultProps$s, ...props };
   const root2 = useRef();
@@ -20962,7 +21010,7 @@ const Swipe = forwardRef((props, instanceRef) => {
         "div",
         {
           ref: measuredRef,
-          className: `${swipeBem(side)}`,
+          className: `${classPrefix2}__${side}`,
           onClick: (e) => handleOperate(e, side)
         },
         props[`${side}Action`]
@@ -21002,13 +21050,13 @@ const Swipe = forwardRef((props, instanceRef) => {
     "div",
     {
       ref: root2,
-      className: classNames(swipeBem(), className),
+      className: classNames(classPrefix2, className),
       onTouchStart: (e) => onTouchStart(e),
       onTouchMove: (e) => onTouchMove(e),
       onTouchEnd: (e) => onTouchEnd(e),
       style
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: `${swipeBem("wrapper")}`, style: wrapperStyle }, renderActionContent("left", leftRef), children, renderActionContent("right", rightRef))
+    /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__wrapper`, style: wrapperStyle }, renderActionContent("left", leftRef), children, renderActionContent("right", rightRef))
   );
 });
 Swipe.defaultProps = defaultProps$s;
@@ -21021,11 +21069,20 @@ class Notification extends React.PureComponent {
     this.close = this.close.bind(this);
     this.startCloseTimer = this.startCloseTimer.bind(this);
     this.clearCloseTimer = this.clearCloseTimer.bind(this);
-    this.close = this.close.bind(this);
     this.clickCover = this.clickCover.bind(this);
+    this.state = {
+      show: true
+    };
   }
   close() {
+    this.setState({
+      show: false
+    });
     this.clearCloseTimer();
+    if (this.props.id) {
+      const element = document.getElementById(this.props.id);
+      element && element.parentNode && element.parentNode.removeChild(element);
+    }
     this.props.onClose();
   }
   startCloseTimer() {
@@ -21090,6 +21147,7 @@ class Notification extends React.PureComponent {
       contentClassName,
       contentStyle
     } = this.props;
+    const { show: show2 } = this.state;
     const classes = classNames({
       "nut-toast-has-icon": icon,
       [`nut-toast-${size}`]: true
@@ -21097,11 +21155,10 @@ class Notification extends React.PureComponent {
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       Overlay,
       {
-        visible: true,
+        visible: show2,
         style,
         className: `${classPrefix$7}__overlay-default ${className}`,
         onClick: () => {
-          console.log("onclick");
           this.clickCover();
         },
         closeOnOverlayClick
@@ -21122,9 +21179,9 @@ class Notification extends React.PureComponent {
 __publicField(Notification, "newInstance");
 Notification.newInstance = (properties, callback) => {
   const element = document.createElement("div");
-  if (properties.id) {
-    element.setAttribute("id", `${properties.id}`);
-  }
+  const id = properties.id ? properties.id : `${(/* @__PURE__ */ new Date()).getTime()}`;
+  element.id = id;
+  properties.id = id;
   document.body.appendChild(element);
   let called = false;
   function ref(instance) {