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

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @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.
 */
@@ -2420,6 +2420,7 @@ Check the top-level render call using <` + t + ">.");
     disabled: false,
     block: false,
     icon: null,
+    nativeType: "button",
     onClick: (e) => {
     }
   };
@@ -2439,6 +2440,7 @@ Check the top-level render call using <` + t + ">.");
         onClick,
         className,
         style,
+        nativeType,
         ...rest
       } = {
         ...defaultProps$1r,
@@ -2472,6 +2474,7 @@ Check the top-level render call using <` + t + ">.");
           {
             ...rest,
             ref,
+            type: nativeType,
             className: classNames(
               prefixCls,
               className,
@@ -11180,6 +11183,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     };
     const onHandleClickOverlay = (e) => {
+      e.stopPropagation();
       if (closeOnOverlayClick) {
         const closed = onClickOverlay && onClickOverlay(e);
         closed && close();
@@ -11221,7 +11225,7 @@ Please add \`${key}Action\` when creating your handler.`);
         {
           classNames: transitionName,
           unmountOnExit: true,
-          timeout: 500,
+          timeout: 300,
           in: innerVisible,
           onEntered: onHandleOpened,
           onExited: onHandleClosed
@@ -13834,7 +13838,7 @@ Please add \`${key}Action\` when creating your handler.`);
   Cascader.defaultProps = defaultProps$Z;
   Cascader.displayName = "NutCascader";
   const CheckboxGroupContext = React.createContext(null);
-  const Context = CheckboxGroupContext;
+  const Context$1 = CheckboxGroupContext;
   const defaultProps$Y = {
     max: void 0,
     labelPosition: "right",
@@ -13905,7 +13909,7 @@ Please add \`${key}Action\` when creating your handler.`);
         });
       }, [options2, max]);
       return /* @__PURE__ */ React.createElement(
-        Context.Provider,
+        Context$1.Provider,
         {
           value: {
             labelPosition: labelPosition || "right",
@@ -13968,7 +13972,7 @@ Please add \`${key}Action\` when creating your handler.`);
       ...others
     } = props;
     let { labelPosition, ...rest } = others;
-    const ctx2 = React.useContext(Context);
+    const ctx2 = React.useContext(Context$1);
     let [innerChecked, setChecked] = usePropsValue({
       value: props.checked,
       defaultValue: props.defaultChecked,
@@ -14349,7 +14353,6 @@ Please add \`${key}Action\` when creating your handler.`);
   }
   const defaultProps$W = {
     ...ComponentDefaults,
-    visible: false,
     title: "",
     options: [],
     value: [],
@@ -14386,12 +14389,26 @@ Please add \`${key}Action\` when creating your handler.`);
         (_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] = React.useState(selectedValue);
     const [columnIndex, setColumnIndex] = React.useState(0);
     const pickerRef = React.useRef(null);
     const [refs, setRefs] = useRefs();
     const [columnsList, setColumnsList] = React.useState([]);
     const isConfirmEvent = React.useRef(false);
+    const actions = {
+      open: () => {
+        setInnerVisible(true);
+      },
+      close: () => {
+        setInnerVisible(false);
+      }
+    };
+    React.useImperativeHandle(ref, () => actions);
     const formatCascade = (columns, values) => {
       const formatted = [];
       let columnOptions = {
@@ -14453,12 +14470,12 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     React.useEffect(() => {
       setInnerValue(innerValue !== selectedValue ? selectedValue : innerValue);
-    }, [visible]);
+    }, [innerVisible]);
     React.useEffect(() => {
-      if (visible) {
+      if (innerVisible) {
         init();
       }
-    }, [options2, visible]);
+    }, [options2, innerVisible]);
     React.useEffect(() => {
       onChange && onChange(setSelectedOptions(), innerValue, columnIndex);
     }, [innerValue, columnsList]);
@@ -14531,6 +14548,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }, 0);
     };
     const closePicker = () => {
+      setInnerVisible(false);
       onClose && onClose(setSelectedOptions(), innerValue);
       afterClose && afterClose(setSelectedOptions(), innerValue, pickerRef);
     };
@@ -14539,21 +14557,34 @@ Please add \`${key}Action\` when creating your handler.`);
         "span",
         {
           className: `${classPrefix2}__cancel-btn`,
-          onClick: () => closePicker()
+          onClick: (e) => {
+            e.stopPropagation();
+            closePicker();
+          }
         },
         locale.cancel
-      ), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__title` }, title || ""), /* @__PURE__ */ React.createElement("span", { className: `${classPrefix2}__confirm-btn`, onClick: confirm2 }, locale.confirm));
+      ), /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__title` }, title || ""), /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: `${classPrefix2}__confirm-btn`,
+          onClick: (e) => {
+            e.stopPropagation();
+            confirm2();
+          }
+        },
+        locale.confirm
+      ));
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, typeof children === "function" && children(selectedValue), /* @__PURE__ */ React.createElement(
       Popup,
       {
-        visible,
+        visible: innerVisible,
         position: "bottom",
-        onClose: () => {
+        afterClose: () => {
           closePicker();
         }
       },
-      /* @__PURE__ */ React.createElement("div", { className: classes, style, ...rest }, renderTitleBar(), children, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__panel`, ref: pickerRef }, columnsList == null ? void 0 : columnsList.map((item, index) => {
+      /* @__PURE__ */ React.createElement("div", { className: classes, style, ...rest }, renderTitleBar(), typeof children !== "function" && children, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__panel`, ref: pickerRef }, columnsList == null ? void 0 : columnsList.map((item, index) => {
         return /* @__PURE__ */ React.createElement(
           PickerPanel$1,
           {
@@ -14568,35 +14599,35 @@ Please add \`${key}Action\` when creating your handler.`);
           }
         );
       })))
-    );
+    ));
   };
   const Picker = React.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: type2,
-      isShowChinese,
+      showChinese,
       minuteStep,
-      modelValue,
       visible,
       title,
+      defaultValue,
       formatter,
-      onCloseDatePicker,
-      onConfirmDatePicker,
+      onClose,
+      onConfirm,
       filter,
       onChange,
       threeDimensional,
@@ -14608,14 +14639,6 @@ Please add \`${key}Action\` when creating your handler.`);
       ...props
     };
     const { locale } = useConfig();
-    const [show2, setShow] = React.useState(false);
-    const [currentDate, setCurrentDate] = React.useState(modelValue);
-    const [defaultValue, setDefaultValue] = React.useState([]);
-    const [options2, setListData] = React.useState([]);
-    const pickerRef = React.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,
@@ -14625,20 +14648,32 @@ Please add \`${key}Action\` when creating your handler.`);
       minute: datepickerLang.min,
       seconds: datepickerLang.seconds
     };
+    const [defaultValueOfPicker, setDefaultValueOfPicker] = React.useState([]);
+    const [options2, setOptions] = React.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 date2 = 1;
@@ -14672,12 +14707,12 @@ Please add \`${key}Action\` when creating your handler.`);
         [`${type22}Seconds`]: seconds
       };
     };
-    const ranges = (date2) => {
-      const curDate = date2 || 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",
@@ -14689,7 +14724,7 @@ Please add \`${key}Action\` when creating your handler.`);
         },
         {
           type: "day",
-          range: [minDate2, maxDate2]
+          range: [minDate, maxDate]
         },
         {
           type: "hour",
@@ -14729,7 +14764,7 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       return result;
     };
-    const updateChooseValueCustmer = (cacheValueData, selectedValue, index) => {
+    const updateChooseValueCustmer = (selectedOptions, selectedValue, index) => {
       if (["date", "datetime", "datehour", "month-day", "year-month"].includes(
         type2.toLocaleLowerCase()
       )) {
@@ -14739,11 +14774,13 @@ Please add \`${key}Action\` when creating your handler.`);
         });
         if (type2.toLocaleLowerCase() === "month-day" && formatDate.length < 3) {
           formatDate.unshift(
-            new Date(modelValue || minDate || maxDate).getFullYear()
+            new Date(defaultValue || startDate || endDate).getFullYear()
           );
         }
         if (type2.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;
@@ -14768,7 +14805,7 @@ Please add \`${key}Action\` when creating your handler.`);
         const isEqual2 = (currentDate == null ? void 0 : currentDate.getTime()) === (date2 == null ? void 0 : date2.getTime());
         date2 && isDate(date2) && !isEqual2 && setCurrentDate(formatValue(date2));
       }
-      props.onChange && props.onChange(cacheValueData, selectedValue, index);
+      props.onChange && props.onChange(selectedOptions, selectedValue, index);
     };
     const padZero = (num, targetLength = 2) => {
       let str = `${num}`;
@@ -14786,12 +14823,13 @@ Please add \`${key}Action\` when creating your handler.`);
         });
       } 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;
@@ -14806,8 +14844,8 @@ Please add \`${key}Action\` when creating your handler.`);
           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);
       }
@@ -14832,8 +14870,8 @@ Please add \`${key}Action\` when creating your handler.`);
       }
       return d;
     };
-    const columns = (date2) => {
-      const val = ranges(date2).map((res, columnIndex) => {
+    const columns = () => {
+      const val = ranges().map((res, columnIndex) => {
         return generateValue(
           res.range[0],
           res.range[1],
@@ -14844,46 +14882,28 @@ Please add \`${key}Action\` when creating your handler.`);
       });
       return val || [];
     };
-    React.useEffect(() => {
-      setCurrentDate(formatValue(modelValue));
-    }, []);
-    React.useEffect(() => {
-      setCurrentDate(formatValue(modelValue));
-    }, [modelValue]);
-    React.useEffect(() => {
-      setShow(visible);
-    }, [visible]);
     React.useEffect(() => {
       if (currentDate) {
-        setListData(columns());
+        setOptions(columns());
       }
-    }, [currentDate]);
-    return /* @__PURE__ */ React.createElement(
-      "div",
+    }, []);
+    return /* @__PURE__ */ React.createElement("div", { className: `nut-datepicker ${className}`, style, ...rest }, options2.length && /* @__PURE__ */ React.createElement(
+      Picker$1,
       {
-        className: `nut-datepicker ${className || ""}`,
-        style,
-        ...rest
-      },
-      options2.length > 0 && /* @__PURE__ */ React.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 = React.createContext({});
+  const Context = React.createContext({});
   function _extends() {
     _extends = Object.assign ? Object.assign.bind() : function(target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -15939,13 +15959,15 @@ Please add \`${key}Action\` when creating your handler.`);
   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
@@ -15954,11 +15976,29 @@ Please add \`${key}Action\` when creating your handler.`);
         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;
+        }
       });
       /**
        * 存储组件数据
@@ -15973,34 +16013,28 @@ Please add \`${key}Action\` when creating your handler.`);
           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 {
@@ -16008,39 +16042,36 @@ Please add \`${key}Action\` when creating your handler.`);
             }
           }
           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,
@@ -16048,12 +16079,12 @@ Please add \`${key}Action\` when creating your handler.`);
           resetFields: this.resetFields,
           submit: this.submit,
           store: this.store,
-          errList: this.errList,
+          errors: this.errors,
           fieldEntities: this.fieldEntities
         };
       });
       this.callbacks = {
-        onFinish: (value) => {
+        onFinish: () => {
         },
         onFinishFailed: () => {
         }
@@ -16072,98 +16103,113 @@ Please add \`${key}Action\` when creating your handler.`);
     }
     return [formRef.current];
   };
+  function isForwardRefComponent(component) {
+    return component.type && component.type.$$typeof && // eslint-disable-next-line react/display-name
+    React.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.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 type2 = 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 (type2) {
-              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", (type2) => {
+        if (type2 === "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: required2, 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.createElement("i", { className: "required" });
-        const renderLabel = starPositon === "Right" ? /* @__PURE__ */ React.createElement(React.Fragment, null, label, renderStar) : /* @__PURE__ */ React.createElement(React.Fragment, null, renderStar, label);
-        return /* @__PURE__ */ React.createElement(Cell, { className: `nut-form-item ${className}` }, label ? /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: "nut-cell__title nut-form-item__label",
-            style: {
-              width: this.pxCheck(labelWidth)
-            }
-          },
-          renderLabel
-        ) : null, /* @__PURE__ */ React.createElement("div", { className: "nut-cell__value nut-form-item__body" }, /* @__PURE__ */ React.createElement("div", { className: "nut-form-item__body__slots" }, childNode), item.length > 0 && /* @__PURE__ */ React.createElement(
-          "div",
+        const { starPosition } = this.context;
+        const renderStar = required2 && /* @__PURE__ */ React.createElement("i", { className: "required" });
+        const renderLabel = /* @__PURE__ */ React.createElement(React.Fragment, null, starPosition === "left" ? renderStar : null, label, starPosition === "right" ? renderStar : null);
+        return /* @__PURE__ */ React.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.createElement("div", { className: "nut-cell__title nut-form-item__label" }, renderLabel) : null,
+          /* @__PURE__ */ React.createElement("div", { className: "nut-cell__value nut-form-item__body" }, /* @__PURE__ */ React.createElement("div", { className: "nut-form-item__body__slots" }, childNode), item.length > 0 && /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: "nut-form-item__body__tips",
+              style: { textAlign: errorMessageAlign }
+            },
+            item[0].message
+          ))
+        );
       });
+      this.componentRef = React.createRef();
+      this.state = {
+        resetCount: 1
+      };
     }
     componentDidMount() {
       this.cancelRegister = this.context.registerField(this);
@@ -16174,81 +16220,86 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     }
     render() {
-      const { children, initialValue } = this.props;
-      const c = Array.isArray(children) ? children[0] : children;
-      let restCNode = c;
-      if (initialValue) {
-        restCNode = React.cloneElement(c, {
-          defaultValue: initialValue
-        });
-      }
+      const { children } = this.props;
+      const child = Array.isArray(children) ? children[0] : children;
       const returnChildNode = React.cloneElement(
-        restCNode,
-        this.getControlled(restCNode)
+        child,
+        this.getControlled(child)
       );
-      return this.renderLayout(returnChildNode);
+      return /* @__PURE__ */ React.createElement(React.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.useRef(false);
+    setInitialValues(initialValues, !mountRef.current);
+    if (!mountRef.current) {
+      mountRef.current = true;
+    }
     return /* @__PURE__ */ React.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.createElement(CellGroup, null, /* @__PURE__ */ React.createElement(FormItemContext.Provider, { value: formInstance }, children))
+      /* @__PURE__ */ React.createElement(CellGroup, null, /* @__PURE__ */ React.createElement(Context.Provider, { value: formInstance }, children), footer ? /* @__PURE__ */ React.createElement(Cell, null, footer) : null)
     );
   };
   Form.defaultProps = defaultProps$T;
@@ -16464,7 +16515,7 @@ Please add \`${key}Action\` when creating your handler.`);
     disabled: false,
     min: 1,
     max: 9999,
-    readonly: false,
+    readOnly: false,
     allowEmpty: false,
     defaultValue: 0,
     step: 1,
@@ -16478,7 +16529,7 @@ Please add \`${key}Action\` when creating your handler.`);
       disabled,
       min,
       max,
-      readonly,
+      readOnly,
       value,
       defaultValue,
       allowEmpty,
@@ -16637,14 +16688,14 @@ Please add \`${key}Action\` when creating your handler.`);
     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;
@@ -16672,7 +16723,7 @@ Please add \`${key}Action\` when creating your handler.`);
         min,
         max,
         disabled,
-        readOnly: readonly,
+        readOnly,
         value: _checked,
         onInput: changeFormatValue,
         onBlur: burFormatValue,
@@ -16685,7 +16736,7 @@ Please add \`${key}Action\` when creating your handler.`);
         min,
         max,
         disabled,
-        readOnly: readonly,
+        readOnly,
         value: _checked,
         onInput: changeValue,
         onBlur: burValue,
@@ -16745,6 +16796,7 @@ Please add \`${key}Action\` when creating your handler.`);
     };
     const hideMenuItem = (index) => {
       showMenuItem[index] = false;
+      console.log([...showMenuItem]);
       setShowMenuItem([...showMenuItem]);
     };
     const updateTitle = (text, index) => {
@@ -16754,6 +16806,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const cloneChildren = () => {
       return React.Children.map(children, (child, index) => {
         return React.cloneElement(child, {
+          ...child.props,
           show: showMenuItem[index],
           index,
           activeColor,
@@ -16793,7 +16846,8 @@ Please add \`${key}Action\` when creating your handler.`);
               }),
               style: { color: showMenuItem[index] ? activeColor : "" },
               key: index,
-              onClick: () => {
+              onClick: (e) => {
+                e.stopPropagation();
                 !disabled && toggleMenuItem(index);
               }
             },
@@ -16835,12 +16889,59 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   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();
+      }
+    };
+    React.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
@@ -16873,9 +16974,6 @@ Please add \`${key}Action\` when creating your handler.`);
     React.useEffect(() => {
       setShowPopup(show2);
     }, [show2]);
-    React.useEffect(() => {
-      getParentOffset();
-    }, [_showPopup]);
     React.useImperativeHandle(ref, () => ({
       toggle: parent.toggleMenuItem
     }));
@@ -16896,119 +16994,108 @@ Please add \`${key}Action\` when creating your handler.`);
       setValue(item.value);
       onChange && onChange(item);
     };
-    const [position, setPosition] = React.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.createElement(React.Fragment, null, closeOnClickAway ? /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `placeholder-element ${classNames({
-          up: direction === "up"
-        })}`,
-        style: placeholderStyle(),
-        onClick: () => parent.toggleMenuItem(index)
-      }
-    ) : null, /* @__PURE__ */ React.createElement(
-      Overlay,
-      {
-        className: "nut-menu__overlay",
-        style: getPosition(),
-        lockScroll: parent.lockScroll,
-        visible: _showPopup,
-        closeOnOverlayClick: parent.closeOnOverlayClick,
-        onClick: () => {
-          parent.closeOnOverlayClick && parent.toggleMenuItem(index);
-        }
-      }
-    ), /* @__PURE__ */ React.createElement(
+    const micRef = React.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.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.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.createElement(
+        "div",
+        {
+          className: classNames(className, {
+            "nut-menu-item__wrap": direction === "down",
+            "nut-menu-item__wrap-up": direction !== "down"
+          }),
+          style: {
+            ...style,
+            ...isShow()
+          }
         },
-        /* @__PURE__ */ React.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item, index2) => {
-          return /* @__PURE__ */ React.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.createElement("i", null, icon || /* @__PURE__ */ React.createElement(
-              x$f,
-              {
-                color: activeColor,
-                className: getIconCName(item.value, value)
-              }
-            )) : null,
-            /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement(
+          CSSTransition$1,
+          {
+            in: _showPopup,
+            timeout: 100,
+            classNames: direction === "down" ? "menu-item" : "menu-item-up"
+          },
+          /* @__PURE__ */ React.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item) => {
+            return /* @__PURE__ */ React.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.createElement("i", null, icon || /* @__PURE__ */ React.createElement(
+                x$f,
+                {
+                  color: activeColor,
+                  className: getIconCName(item.value, value)
+                }
+              )) : null,
+              /* @__PURE__ */ React.createElement(
+                "div",
+                {
+                  className: getIconCName(item.value, value),
+                  style: {
+                    color: `${item.value === _value ? activeColor : ""}`
+                  }
+                },
+                item.text
+              )
+            );
+          }), children)
+        )
       )
-    ));
+    );
   });
   MenuItem.defaultProps = defaultProps$P;
   MenuItem.displayName = "NutMenuItem";
@@ -17841,7 +17928,7 @@ Please add \`${key}Action\` when creating your handler.`);
       return /* @__PURE__ */ React.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 || "",
@@ -17914,7 +18001,16 @@ Please add \`${key}Action\` when creating your handler.`);
         style: { ...props.style }
       },
       renderLeft(),
-      /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__content` }, renderLeftIn(), renderField(), renderRightIn(), clearable && value && handleClear()),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `${classPrefix2}__content ${shape === "round" ? `${classPrefix2}__round` : ""}`
+        },
+        renderLeftIn(),
+        renderField(),
+        renderRightIn(),
+        clearable && value && handleClear()
+      ),
       renderRight()
     );
   };
@@ -18474,19 +18570,6 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     }
   }
-  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,
@@ -19981,7 +20064,7 @@ Please add \`${key}Action\` when creating your handler.`);
         onClick: handleClick2
       },
       leftIcon ? /* @__PURE__ */ React.createElement("div", { className: "left-icon" }, leftIcon) : null,
-      children ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
+      children ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
         return /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -19994,7 +20077,7 @@ Please add \`${key}Action\` when creating your handler.`);
           },
           item
         );
-      }))) : /* @__PURE__ */ React.createElement("div", { className: "horseLamp_list", style: horseLampStyle }, scrollList.current.map((item, index) => {
+      })) : /* @__PURE__ */ React.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.createElement(
@@ -20188,41 +20271,6 @@ Please add \`${key}Action\` when creating your handler.`);
       }
     }
   };
-  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();
-      }
-    };
-    React.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: [],
@@ -20370,7 +20418,7 @@ Please add \`${key}Action\` when creating your handler.`);
       return styles;
     };
     const getRootPosition = () => {
-      let styles = {};
+      const styles = {};
       if (!rootPosition)
         return {};
       const contentWidth = elWidth;
@@ -20380,34 +20428,34 @@ Please add \`${key}Action\` when creating your handler.`);
       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`;
           }
         }
@@ -20859,7 +20907,7 @@ Please add \`${key}Action\` when creating your handler.`);
     name: ""
   };
   const Swipe = React.forwardRef((props, instanceRef) => {
-    const swipeBem = cn("swipe");
+    const classPrefix2 = "nut-swipe";
     const touch = useTouch();
     const { children, className, style } = { ...defaultProps$s, ...props };
     const root2 = React.useRef();
@@ -20980,7 +21028,7 @@ Please add \`${key}Action\` when creating your handler.`);
           "div",
           {
             ref: measuredRef,
-            className: `${swipeBem(side)}`,
+            className: `${classPrefix2}__${side}`,
             onClick: (e) => handleOperate(e, side)
           },
           props[`${side}Action`]
@@ -21020,13 +21068,13 @@ Please add \`${key}Action\` when creating your handler.`);
       "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.createElement("div", { className: `${swipeBem("wrapper")}`, style: wrapperStyle }, renderActionContent("left", leftRef), children, renderActionContent("right", rightRef))
+      /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__wrapper`, style: wrapperStyle }, renderActionContent("left", leftRef), children, renderActionContent("right", rightRef))
     );
   });
   Swipe.defaultProps = defaultProps$s;
@@ -21039,11 +21087,20 @@ Please add \`${key}Action\` when creating your handler.`);
       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() {
@@ -21108,6 +21165,7 @@ Please add \`${key}Action\` when creating your handler.`);
         contentClassName,
         contentStyle
       } = this.props;
+      const { show: show2 } = this.state;
       const classes = classNames({
         "nut-toast-has-icon": icon,
         [`nut-toast-${size}`]: true
@@ -21115,11 +21173,10 @@ Please add \`${key}Action\` when creating your handler.`);
       return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
         Overlay,
         {
-          visible: true,
+          visible: show2,
           style,
           className: `${classPrefix$7}__overlay-default ${className}`,
           onClick: () => {
-            console.log("onclick");
             this.clickCover();
           },
           closeOnOverlayClick
@@ -21140,9 +21197,9 @@ Please add \`${key}Action\` when creating your handler.`);
   __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) {