@nutui/nutui-react 1.2.3-beta.3 → 1.3.0

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.2.3-beta.3 Wed Aug 17 2022 10:06:12 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.0 Wed Aug 24 2022 16:38:05 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -48,18 +48,18 @@ const cn = classname.exports.withNaming({ n: "nut-", e: "__", m: "--", v: "-" })
 const defaultProps$1a = {
   name: "",
   size: "",
-  classPrefix: "nutui-icon",
+  classPrefix: "nut-icon",
   fontClassName: "nutui-iconfont",
   color: "",
   tag: "i",
-  click: (e2) => {
+  onClick: (e2) => {
   },
   className: ""
 };
 function pxCheck$2(value) {
   return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
 }
-const Icon = (props) => {
+function Icon(props) {
   const {
     name,
     size,
@@ -70,7 +70,7 @@ const Icon = (props) => {
     className,
     fontClassName,
     style,
-    click,
+    onClick,
     ...rest
   } = {
     ...defaultProps$1a,
@@ -80,8 +80,8 @@ const Icon = (props) => {
   const type = isImage ? "img" : tag;
   const b2 = cn("icon");
   const handleClick2 = (e2) => {
-    if (props.click) {
-      props.click(e2);
+    if (onClick) {
+      onClick(e2);
     }
   };
   const hasSrc = () => {
@@ -92,9 +92,7 @@ const Icon = (props) => {
   return React__default.createElement(
     type,
     {
-      className: isImage ? `${className || ""} ${b2("img")}` : `${className || ""} ${fontClassName} ${b2(null, [
-        classPrefix
-      ])} nut-icon-${name} `,
+      className: isImage ? `${b2("img")} ${className || ""} ` : `${fontClassName} ${b2(null)} ${classPrefix}-${name} ${className || ""}`,
       style: {
         color,
         fontSize: pxCheck$2(size),
@@ -108,7 +106,7 @@ const Icon = (props) => {
     },
     children
   );
-};
+}
 Icon.defaultProps = defaultProps$1a;
 Icon.displayName = "NutIcon";
 const defaultProps$19 = {
@@ -2789,7 +2787,7 @@ Tabbar.displayName = "NutTabbar";
 const defaultProps$Z = {
   dot: false,
   size: "",
-  classPrefix: "nutui-iconfont",
+  classPrefix: "nut-icon",
   tabTitle: "",
   icon: "",
   href: "",
@@ -3722,8 +3720,11 @@ class Notification$1 extends React.PureComponent {
   }
   render() {
     const {
+      id,
       style,
       icon,
+      iconSize,
+      title,
       msg,
       bottom,
       center,
@@ -3741,14 +3742,16 @@ class Notification$1 extends React.PureComponent {
       "nut-toast-has-icon": icon,
       "nut-toast-cover": cover,
       "nut-toast-loading": type === "loading",
-      customClass,
+      [`${customClass}`]: true,
       [`nut-toast-${size}`]: true
     });
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
       className: `${toastBem()} ${classes}`,
+      id: `toast-${id}`,
       style: {
-        bottom: center ? "auto" : `${bottom}px`,
-        backgroundColor: cover ? coverColor : ""
+        bottom: center ? "auto" : `${bottom}`,
+        backgroundColor: cover ? coverColor : "",
+        ...style
       },
       onClick: () => {
         this.clickCover();
@@ -3763,8 +3766,11 @@ class Notification$1 extends React.PureComponent {
       className: toastBem("icon-wrapper")
     }, /* @__PURE__ */ React.createElement(Icon, {
       name: icon || "",
-      size: "20"
-    })) : null, /* @__PURE__ */ React.createElement("span", {
+      color: "#ffffff",
+      size: iconSize
+    })) : null, title ? /* @__PURE__ */ React.createElement("div", {
+      className: "nut-toast-title"
+    }, title) : null, /* @__PURE__ */ React.createElement("span", {
       className: toastBem("text")
     }, msg))));
   }
@@ -3798,13 +3804,16 @@ let messageInstance$1 = null;
 const options$1 = {
   msg: "",
   id: "",
+  style: {},
   duration: 1.5,
   center: true,
   type: "text",
+  title: "",
   customClass: "",
-  bottom: 30,
+  bottom: "30px",
   size: "base",
-  icon: "",
+  icon: null,
+  iconSize: "20",
   textAlignCenter: true,
   loadingRotate: true,
   bgColor: "rgba(0, 0, 0, .8)",
@@ -3896,9 +3905,6 @@ const Range = (props) => {
     buttonColor,
     hiddenRange,
     hiddenTag,
-    min,
-    max,
-    step,
     modelValue,
     button,
     vertical,
@@ -3907,6 +3913,10 @@ const Range = (props) => {
     dragStart,
     dragEnd
   } = { ...defaultProps$R, ...props };
+  let { min, max, step } = { ...defaultProps$R, ...props };
+  min = Number(min);
+  max = Number(max);
+  step = Number(step);
   const [buttonIndex, SetButtonIndex] = useState(0);
   const [initValue, SetInitValue] = useState();
   const [dragStatus, SetDragStatus] = useState("start");
@@ -4432,7 +4442,7 @@ const CalendarItem = (props) => {
       if (startDate && Utils.compareDate(currDate, startDate) || endDate && Utils.compareDate(endDate, currDate)) {
         return `${state.dayPrefix}-disabled`;
       }
-      if (state.isRange && Array.isArray(state.currDate) && Object.values(state.currDate).length == 2 && Utils.compareDate(state.currDate[0], currDate) && Utils.compareDate(currDate, state.currDate[1])) {
+      if (state.isRange && Array.isArray(state.currDate) && Object.values(state.currDate).length === 2 && Utils.compareDate(state.currDate[0], currDate) && Utils.compareDate(currDate, state.currDate[1])) {
         return `${state.dayPrefix}-choose`;
       }
       return null;
@@ -4440,14 +4450,14 @@ const CalendarItem = (props) => {
     return `${state.dayPrefix}-disabled`;
   };
   const isActive = (day, month) => {
-    return state.isRange && day.type == "curr" && getClass(day, month) == "calendar-month-day-active";
+    return state.isRange && day.type === "curr" && getClass(day, month) === "calendar-month-day-active";
   };
   const isCurrDay = (month, day) => {
     const date = `${month.curData[0]}-${month.curData[1]}-${day}`;
     return Utils.isEqual(date, Utils.date2Str(new Date()));
   };
   const confirm2 = () => {
-    if (state.isRange && state.chooseData.length == 2 || !state.isRange) {
+    if (state.isRange && state.chooseData.length === 2 || !state.isRange) {
       onChoose && onChoose(state.chooseData);
       if (poppable) {
         onUpdate && onUpdate();
@@ -4455,7 +4465,7 @@ const CalendarItem = (props) => {
     }
   };
   const chooseDay = (day, month, isFirst, isRange) => {
-    if (getClass(day, month, isRange) != `${state.dayPrefix}-disabled`) {
+    if (getClass(day, month, isRange) !== `${state.dayPrefix}-disabled`) {
       let days = [...month.curData];
       days = isRange ? days.splice(3) : days.splice(0, 3);
       days[2] = typeof day.day === "number" ? Utils.getNumTwoBit(day.day) : day.day;
@@ -4472,7 +4482,7 @@ const CalendarItem = (props) => {
         } else {
           Array.isArray(state.currDate) && state.currDate.unshift(days[3]);
         }
-        if (state.chooseData.length == 2 || !state.chooseData.length) {
+        if (state.chooseData.length === 2 || !state.chooseData.length) {
           state.chooseData = [...days];
         } else if (Utils.compareDate(state.chooseData[3], days[3])) {
           state.chooseData = [[...state.chooseData], [...days]];
@@ -4493,20 +4503,23 @@ const CalendarItem = (props) => {
     return false;
   };
   const isEndTip = (day, month) => {
+    if (isStartTip(day, month)) {
+      return false;
+    }
     return isActive(day, month);
   };
   const getCurrData = (type2) => {
-    const monthData = type2 == "prev" ? state.monthsData[0] : state.monthsData[state.monthsData.length - 1];
+    const monthData = type2 === "prev" ? state.monthsData[0] : state.monthsData[state.monthsData.length - 1];
     let year = parseInt(monthData.curData[0]);
     let month = parseInt(monthData.curData[1].toString().replace(/^0/, ""));
     switch (type2) {
       case "prev":
-        month == 1 && (year -= 1);
-        month = month == 1 ? 12 : --month;
+        month === 1 && (year -= 1);
+        month = month === 1 ? 12 : --month;
         break;
       case "next":
-        month == 12 && (year += 1);
-        month = month == 12 ? 1 : ++month;
+        month === 12 && (year += 1);
+        month = month === 12 ? 1 : ++month;
         break;
     }
     return [
@@ -4516,7 +4529,7 @@ const CalendarItem = (props) => {
     ];
   };
   const getDaysStatus = (days, type2) => {
-    if (type2 == "prev" && days >= 7) {
+    if (type2 === "prev" && days >= 7) {
       days -= 7;
     }
     return Array.from(Array(days), (v2, k2) => {
@@ -4541,7 +4554,7 @@ const CalendarItem = (props) => {
         ...getDaysStatus(currMonthDays, "curr")
       ]
     };
-    if (type2 == "next") {
+    if (type2 === "next") {
       if (!state.endData || !Utils.compareDate(
         `${state.endData[0]}-${state.endData[1]}-${Utils.getMonthDays(
           state.endData[0],
@@ -4607,7 +4620,7 @@ const CalendarItem = (props) => {
       if (updateMove < 0 && updateMove < -offsetHeight + h2) {
         updateMove = -offsetHeight + h2;
       }
-      if (offsetHeight <= h2 && state.monthsData.length == 1) {
+      if (offsetHeight <= h2 && state.monthsData.length === 1) {
         updateMove = 0;
       }
       setTransform(updateMove, type2, time);
@@ -4618,7 +4631,7 @@ const CalendarItem = (props) => {
       if (updateMove < -offsetHeight + h2 - 100 && state.monthsData.length > 1) {
         updateMove = -offsetHeight + h2 - 100;
       }
-      if (updateMove < 0 && updateMove < -100 && state.monthsData.length == 1) {
+      if (updateMove < 0 && updateMove < -100 && state.monthsData.length === 1) {
         updateMove = -100;
       }
       setTransform(updateMove);
@@ -4777,7 +4790,7 @@ const CalendarItem = (props) => {
     className: "calendar-curr-tips"
   }, locale.calendaritem.today) : "", isStartTip(day, month) ? /* @__PURE__ */ React__default.createElement("div", {
     className: "calendar-day-tip"
-  }, locale.calendaritem.start) : isEndTip(day, month) ? /* @__PURE__ */ React__default.createElement("div", {
+  }, locale.calendaritem.start) : "", isEndTip(day, month) ? /* @__PURE__ */ React__default.createElement("div", {
     className: "calendar-day-tip"
   }, locale.calendaritem.end) : "")))))))), poppable && !isAutoBackFill ? /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-calendar-footer"
@@ -4883,7 +4896,6 @@ const CheckboxGroup = React__default.forwardRef(
           const childrenLabel = [];
           React__default.Children.map(children, (child) => {
             const childProps = child.props;
-            console.log(child);
             childrenLabel.push(childProps.label || child.children);
           });
           setInnerValue(childrenLabel);
@@ -5054,9 +5066,11 @@ const InternalPickerSlot = (props, ref) => {
     defaultValue,
     listData = [],
     threeDimensional = true,
+    swipeDuration = 1e3,
     chooseItem
   } = props;
   const touch = useTouch();
+  const DEFAULT_DURATION = 200;
   const INERTIA_TIME = 300;
   const INERTIA_DISTANCE = 15;
   const [currIndex, setCurrIndex] = useState(1);
@@ -5076,7 +5090,7 @@ const InternalPickerSlot = (props, ref) => {
     }
     return false;
   };
-  const setTransform = (translateY = 0, type, time = 1e3, deg) => {
+  const setTransform = (translateY = 0, type, time = DEFAULT_DURATION, deg) => {
     let nTime = time;
     if (type !== "end") {
       nTime = 0;
@@ -5136,7 +5150,7 @@ const InternalPickerSlot = (props, ref) => {
     const moveTime = Date.now() - startTime;
     if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
       const distance = momentum(move, moveTime);
-      setMove(distance, "end", moveTime + 1e3);
+      setMove(distance, "end", +swipeDuration);
     } else {
       setMove(move, "end");
     }
@@ -5236,6 +5250,7 @@ const InternalPicker = (props, ref) => {
     className,
     style,
     threeDimensional,
+    swipeDuration,
     ...rest
   } = props;
   const [chooseValueData, setchooseValueData] = useState([]);
@@ -5400,6 +5415,7 @@ const InternalPicker = (props, ref) => {
       listData: item,
       threeDimensional,
       chooseItem: (value, index22) => chooseItem(value, index22),
+      swipeDuration,
       key: index2,
       keyIndex: index2
     });
@@ -5777,23 +5793,23 @@ const InputNumber = (props) => {
     return Number(v2).toFixed(Number(decimalPlaces));
   };
   const emitChange = (value, e2) => {
-    const output_value = fixedDecimalPlaces(value);
-    change && change(output_value, e2);
+    const outputValue = fixedDecimalPlaces(value);
+    change && change(outputValue, e2);
     if (!isAsync) {
-      if (Number(output_value) < Number(min)) {
+      if (Number(outputValue) < Number(min)) {
         setInputValue(Number(min));
-      } else if (Number(output_value) > Number(max)) {
+      } else if (Number(outputValue) > Number(max)) {
         setInputValue(Number(max));
       } else {
-        setInputValue(output_value);
+        setInputValue(outputValue);
       }
     }
   };
   const reduceNumber = (e2) => {
     reduce && reduce(e2);
     if (reduceAllow()) {
-      const output_value = Number(inputValue) - Number(step);
-      emitChange(output_value, e2);
+      const outputValue = Number(inputValue) - Number(step);
+      emitChange(outputValue, e2);
     } else {
       overlimit && overlimit(e2);
     }
@@ -5801,8 +5817,8 @@ const InputNumber = (props) => {
   const addNumber = (e2) => {
     add && add(e2);
     if (addAllow()) {
-      const output_value = Number(inputValue) + Number(step);
-      emitChange(output_value, e2);
+      const outputValue = Number(inputValue) + Number(step);
+      emitChange(outputValue, e2);
     } else {
       overlimit && overlimit(e2);
     }
@@ -5848,7 +5864,7 @@ const InputNumber = (props) => {
     className: iconMinusClasses,
     size: buttonSize,
     name: "minus",
-    click: reduceNumber
+    onClick: reduceNumber
   }), /* @__PURE__ */ React__default.createElement("input", {
     type: "number",
     min,
@@ -5864,7 +5880,7 @@ const InputNumber = (props) => {
     className: iconAddClasses,
     size: buttonSize,
     name: "plus",
-    click: addNumber
+    onClick: addNumber
   }));
 };
 InputNumber.defaultProps = defaultProps$L;
@@ -6012,12 +6028,17 @@ const Input = (props) => {
   const updateValue = (value, trigger = "onChange") => {
     var _a;
     let val = value;
-    if (type === "digit") {
+    if (type === "digit" || type === "tel") {
       val = formatNumber(val, false, false);
     }
     if (type === "number") {
       val = formatNumber(val, true, true);
     }
+    if (type === "tel" && !formatter) {
+      const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
+      const regNumber = /[^-0-9]/g;
+      val = !regTel.test(val) && val.length > 11 ? val.substring(0, 11) : val.replace(regNumber, "");
+    }
     if (formatter && trigger === formatTrigger) {
       val = formatter(val);
     }
@@ -6159,7 +6180,7 @@ const Input = (props) => {
     className: "nut-input-clear",
     name: clearIcon,
     size: clearSize,
-    click: (e2) => {
+    onClick: (e2) => {
       handleClear(e2);
     }
   }) : null, rightIcon && rightIcon.length > 0 ? /* @__PURE__ */ React__default.createElement("div", {
@@ -6426,9 +6447,9 @@ const Rate = (props) => {
 Rate.defaultProps = defaultProps$H;
 Rate.displayName = "NutRate";
 const defaultProps$G = {
-  title: "\u8BF7\u8F93\u5165\u5BC6\u7801",
-  desc: "\u60A8\u4F7F\u7528\u4E86\u865A\u62DF\u8D44\u4EA7\uFF0C\u8BF7\u8FDB\u884C\u9A8C\u8BC1",
-  tips: "\u5FD8\u8BB0\u5BC6\u7801",
+  title: "",
+  desc: "",
+  tips: "",
   visible: false,
   modelValue: "",
   errorMsg: "",
@@ -6436,7 +6457,7 @@ const defaultProps$G = {
   closeOnClickOverlay: true,
   length: 6,
   className: "",
-  change: (value) => {
+  onChange: (value) => {
   },
   onOk: (value) => {
   },
@@ -6446,7 +6467,7 @@ const defaultProps$G = {
   },
   onTips: () => {
   },
-  complete: (value) => {
+  onComplete: (value) => {
   }
 };
 const ShortPassword = (props) => {
@@ -6463,12 +6484,12 @@ const ShortPassword = (props) => {
     length,
     style,
     className,
-    change,
+    onChange,
     onOk,
     onTips,
     onCancel,
     onClose,
-    complete,
+    onComplete,
     ...reset
   } = props;
   const b2 = cn("shortpassword");
@@ -6483,7 +6504,7 @@ const ShortPassword = (props) => {
     setInnerVisible(visible);
   }, [visible]);
   useEffect(() => {
-    if (modelValue) {
+    if (typeof modelValue !== "undefined") {
       setInputValue(modelValue);
     }
   }, [modelValue]);
@@ -6494,25 +6515,28 @@ const ShortPassword = (props) => {
     }
     setInputValue(inputValue2);
     if (String(inputValue2).length === comLen) {
-      complete && complete(inputValue2);
+      onComplete && onComplete(inputValue2);
     }
-    change && change(inputValue2);
+    onChange && onChange(inputValue2);
   };
   const systemStyle = () => {
     const u = navigator.userAgent;
     const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
     const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+    let style2 = {};
+    console.log(isIOS, isAndroid);
     if (isIOS) {
-      return {
+      style2 = {
         paddingRight: "1200px"
       };
     }
     if (isAndroid) {
-      return {
+      style2 = {
         opacity: 0,
         zIndex: 10
       };
     }
+    return style2;
   };
   const focus = () => {
     if (textInput.current) {
@@ -6539,9 +6563,9 @@ const ShortPassword = (props) => {
     ...reset
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: b2("title")
-  }, locale.shortpassword.title || title), /* @__PURE__ */ React__default.createElement("div", {
+  }, title || locale.shortpassword.title), /* @__PURE__ */ React__default.createElement("div", {
     className: b2("subtitle")
-  }, locale.shortpassword.desc || desc), /* @__PURE__ */ React__default.createElement("div", {
+  }, desc || locale.shortpassword.desc), /* @__PURE__ */ React__default.createElement("div", {
     className: b2("input")
   }, /* @__PURE__ */ React__default.createElement("input", {
     ref: textInput,
@@ -6567,7 +6591,7 @@ const ShortPassword = (props) => {
     className: b2("message")
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: b2("message__error")
-  }, errorMsg2), tips ? /* @__PURE__ */ React__default.createElement("div", {
+  }, errorMsg2), tips || locale.shortpassword.tips ? /* @__PURE__ */ React__default.createElement("div", {
     className: b2("message__forget")
   }, /* @__PURE__ */ React__default.createElement(Icon, {
     className: "icon",
@@ -6575,7 +6599,7 @@ const ShortPassword = (props) => {
     name: "tips"
   }), /* @__PURE__ */ React__default.createElement("div", {
     onClick: onTips
-  }, locale.shortpassword.tips || tips)) : null), !noButton ? /* @__PURE__ */ React__default.createElement("div", {
+  }, tips || locale.shortpassword.tips)) : null), !noButton ? /* @__PURE__ */ React__default.createElement("div", {
     className: b2("footer")
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: b2("footer__cancel"),
@@ -6663,6 +6687,9 @@ const TextArea = (props) => {
     disabled,
     readOnly: readonly,
     value: inputValue,
+    onInput: (e2) => {
+      textChange(e2);
+    },
     onChange: (e2) => {
       textChange(e2);
     },
@@ -6856,6 +6883,7 @@ const InternalUploader = (props, ref) => {
             item.status = "ready";
             item.message = locale.uploader.readyUpload;
           }
+          return item;
         });
         return [...fileList2];
       });
@@ -6868,6 +6896,7 @@ const InternalUploader = (props, ref) => {
             item.status = "uploading";
             item.message = locale.uploader.uploading;
           }
+          return item;
         });
         return [...fileList2];
       });
@@ -6881,6 +6910,7 @@ const InternalUploader = (props, ref) => {
             item.status = "success";
             item.message = locale.uploader.success;
           }
+          return item;
         });
         return [...fileList2];
       });
@@ -6896,6 +6926,7 @@ const InternalUploader = (props, ref) => {
             item.status = "error";
             item.message = locale.uploader.error;
           }
+          return item;
         });
         return [...fileList2];
       });
@@ -7025,7 +7056,7 @@ const InternalUploader = (props, ref) => {
     return /* @__PURE__ */ React__default.createElement("div", {
       className: `nut-uploader__preview ${listType}`,
       key: item.uid
-    }, listType == "picture" && !children && /* @__PURE__ */ React__default.createElement("div", {
+    }, listType === "picture" && !children && /* @__PURE__ */ React__default.createElement("div", {
       className: "nut-uploader__preview-img"
     }, item.status === "ready" ? /* @__PURE__ */ React__default.createElement("div", {
       className: "nut-uploader__preview__progress"
@@ -7035,21 +7066,23 @@ const InternalUploader = (props, ref) => {
       className: "nut-uploader__preview__progress"
     }, /* @__PURE__ */ React__default.createElement(Icon, {
       color: "#fff",
-      name: `${item.status == "error" ? "failure" : "loading"}`
+      name: `${item.status === "error" ? "failure" : "loading"}`
     }), /* @__PURE__ */ React__default.createElement("div", {
       className: "nut-uploader__preview__progress__msg"
     }, item.message)), isDeletable && /* @__PURE__ */ React__default.createElement(Icon, {
       color: "rgba(0,0,0,0.6)",
       className: "close",
       name: "failure",
-      click: () => onDelete(item, index2)
+      onClick: () => onDelete(item, index2)
     }), item.type.includes("image") ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, item.url && /* @__PURE__ */ React__default.createElement("img", {
       className: "nut-uploader__preview-img__c",
       src: item.url,
+      alt: "",
       onClick: () => handleItemClick(item)
     })) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, defaultImg ? /* @__PURE__ */ React__default.createElement("img", {
       className: "nut-uploader__preview-img__c",
       src: defaultImg,
+      alt: "",
       onClick: () => handleItemClick(item)
     }) : /* @__PURE__ */ React__default.createElement("div", {
       className: "nut-uploader__preview-img__file"
@@ -7061,7 +7094,7 @@ const InternalUploader = (props, ref) => {
       name: "link"
     }), "\xA0", item.name))), /* @__PURE__ */ React__default.createElement("div", {
       className: "tips"
-    }, item.name)), listType == "list" && /* @__PURE__ */ React__default.createElement("div", {
+    }, item.name)), listType === "list" && /* @__PURE__ */ React__default.createElement("div", {
       className: "nut-uploader__preview-list"
     }, /* @__PURE__ */ React__default.createElement("div", {
       className: `nut-uploader__preview-img__file__name ${item.status}`,
@@ -7072,9 +7105,9 @@ const InternalUploader = (props, ref) => {
       color: "#808080",
       className: "nut-uploader__preview-img__file__del",
       name: "del",
-      click: () => onDelete(item, index2)
+      onClick: () => onDelete(item, index2)
     })));
-  }), maximum > fileList.length && listType == "picture" && !children && /* @__PURE__ */ React__default.createElement("div", {
+  }), maximum > fileList.length && listType === "picture" && !children && /* @__PURE__ */ React__default.createElement("div", {
     className: `nut-uploader__upload ${listType}`
   }, /* @__PURE__ */ React__default.createElement(Icon, {
     size: uploadIconSize,
@@ -12126,7 +12159,7 @@ const Drag = (props) => {
     ({ down, last, offset: [x2, y2] }) => {
       api.start({ x: x2, y: y2, immediate: down });
       if (last) {
-        if (props.direction != "y" && props.attract) {
+        if (props.direction !== "y" && props.attract) {
           if (x2 < middleLine.current) {
             api.start({ x: boundaryState.left, y: y2, immediate: down });
           } else {
@@ -12529,6 +12562,7 @@ const Infiniteloading = (props) => {
       }
       setIsInfiniting(true);
       loadMore && loadMore(infiniteDone);
+      return true;
     });
   };
   const infiniteDone = () => {
@@ -12572,7 +12606,7 @@ const Infiniteloading = (props) => {
     }
   };
   const requestAniFrame2 = () => {
-    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(callback) {
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function fn(callback) {
       window.setTimeout(callback, 1e3 / 60);
     };
   };
@@ -12604,7 +12638,7 @@ const Infiniteloading = (props) => {
     }
     beforeScrollTop.current = resScrollTop;
     scrollChange && scrollChange(resScrollTop);
-    return offsetDistance <= threshold && direction == "down";
+    return offsetDistance <= threshold && direction === "down";
   };
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes,
@@ -12624,7 +12658,7 @@ const Infiniteloading = (props) => {
     name: pullIcon
   }), /* @__PURE__ */ React__default.createElement("span", {
     className: "top-text"
-  }, locale.infiniteloading.pullRefreshText || pullTxt))), /* @__PURE__ */ React__default.createElement("div", {
+  }, pullTxt || locale.infiniteloading.pullRefreshText))), /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-infinite-container"
   }, children), /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-infinite-bottom"
@@ -12635,9 +12669,9 @@ const Infiniteloading = (props) => {
     name: loadIcon
   }), /* @__PURE__ */ React__default.createElement("div", {
     className: "bottom-text"
-  }, locale.infiniteloading.loadText || loadTxt)) : !hasMore && /* @__PURE__ */ React__default.createElement("div", {
+  }, loadTxt || locale.infiniteloading.loadText)) : !hasMore && /* @__PURE__ */ React__default.createElement("div", {
     className: "tips"
-  }, locale.infiniteloading.loadMoreText || loadMoreTxt)));
+  }, loadMoreTxt || locale.infiniteloading.loadMoreText)));
 };
 Infiniteloading.defaultProps = defaultProps$x;
 Infiniteloading.displayName = "NutInfiniteloading";
@@ -12687,11 +12721,22 @@ class Notification extends React.PureComponent {
     this.clearCloseTimer();
   }
   render() {
-    const { children, style, msg, color, background, type, className } = this.props;
+    const {
+      children,
+      style,
+      msg,
+      color,
+      background,
+      type,
+      className,
+      position,
+      isWrapTeleport
+    } = this.props;
     this.state;
     cn("notify");
     const classes = classNames({
-      "popup-top": true,
+      "popup-top": position === "top",
+      "popup-bottom": position === "bottom",
       "nut-notify": true,
       [`nut-notify--${type}`]: true
     });
@@ -12700,7 +12745,9 @@ class Notification extends React.PureComponent {
       timeout: 300,
       classNames: "fade",
       unmountOnExit: true,
-      appear: true
+      appear: true,
+      position,
+      isWrapTeleport
     }, /* @__PURE__ */ React.createElement("div", {
       className: `${classes} ${className}`,
       style: {
@@ -12743,8 +12790,11 @@ const options = {
   msg: "",
   id: "",
   duration: 3e3,
+  color: "",
   type: "danger",
   className: "",
+  position: "top",
+  isWrapTeleport: true,
   onClosed: () => {
   },
   onClick: () => {
@@ -12988,7 +13038,7 @@ const defaultProps$u = {
   color: "",
   background: "",
   delay: 1,
-  scrollable: true,
+  scrollable: null,
   speed: 50
 };
 const NoticeBar = (props) => {
@@ -13026,6 +13076,7 @@ const NoticeBar = (props) => {
   const [animate, SetAnimate] = useState(false);
   const [distance, SetDistance] = useState(0);
   const [timer, SetTimer] = useState(0);
+  const [isCanScroll, SetIsCanScroll] = useState(null);
   useState(0);
   useEffect(() => {
     if (direction === "vertical") {
@@ -13052,12 +13103,13 @@ const NoticeBar = (props) => {
   }, []);
   const cloneChild = (listItem, listIndex) => {
     return React__default.Children.map(children, function(child, index2) {
-      if (child && index2 == listIndex) {
+      if (child && index2 === listIndex) {
         return React__default.cloneElement(child, {
           key: listIndex,
           children: listItem
         });
       }
+      return null;
     });
   };
   useEffect(() => {
@@ -13078,7 +13130,9 @@ const NoticeBar = (props) => {
       }
       const wrapW = wrap.current.getBoundingClientRect().width;
       const offsetW = content.current.getBoundingClientRect().width;
-      if (scrollable && offsetW > wrapW) {
+      const canScroll = scrollable == null ? offsetW > wrapW : scrollable;
+      SetIsCanScroll(canScroll);
+      if (canScroll) {
         SetWrapWidth(wrapW);
         SetOffsetW(offsetW);
         SetDuration(offsetW / speed);
@@ -13086,7 +13140,7 @@ const NoticeBar = (props) => {
       } else {
         SetAnimationClass("");
       }
-    });
+    }, 0);
   };
   const handleClick2 = (event) => {
     click && click(event);
@@ -13148,19 +13202,39 @@ const NoticeBar = (props) => {
   const handleClickIcon = () => {
     close && close(scrollList[0]);
   };
+  const iconShow = () => {
+    if (leftIcon === "close") {
+      return false;
+    }
+    return true;
+  };
+  const iconBg = () => {
+    let iconBg2 = "";
+    if (leftIcon) {
+      iconBg2 = leftIcon;
+    }
+    return iconBg2;
+  };
+  const isEllipsis = () => {
+    if (isCanScroll == null) {
+      return wrapable;
+    }
+    return !isCanScroll && !wrapable;
+  };
   const contentStyle = {
-    paddingLeft: firstRound ? 0 : `${wrapWidth}px`,
-    animationDelay: `${firstRound ? props.delay : 0}s`,
-    animationDuration: `${duration}s`
+    animationDelay: `${firstRound ? delay : 0}s`,
+    animationDuration: `${duration}s`,
+    transform: `translateX(${firstRound ? 0 : `${wrapWidth}px`})`
   };
   const barStyle = {
     color,
     background,
-    height: direction == "vertical" ? `${height}px` : ""
+    height: direction === "vertical" ? `${height}px` : ""
   };
+  const duringTime = ~~(height / speed / 4);
   const horseLampStyle = {
     transform: complexAm ? `translateY(${distance}px)` : "",
-    transition: animate ? `all ${~~(height / speed / 4)}s` : "",
+    transition: animate ? `all ${duringTime === 0 ? ~~(height / speed) : duringTime}s` : "",
     marginTop: animate ? `-${height}px` : ""
   };
   const b2 = cn("noticebar");
@@ -13173,32 +13247,32 @@ const NoticeBar = (props) => {
   return /* @__PURE__ */ React__default.createElement("div", {
     className: `${b2()} ${className || ""}`,
     style
-  }, showNoticeBar && direction == "across" ? /* @__PURE__ */ React__default.createElement("div", {
+  }, showNoticeBar && direction === "across" ? /* @__PURE__ */ React__default.createElement("div", {
     className: noticebarClass,
     style: barStyle,
     onClick: handleClick2
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, iconShow() ? /* @__PURE__ */ React__default.createElement("div", {
     className: "left-icon",
-    style: { backgroundImage: `url(${leftIcon || ""})` }
-  }, !leftIcon ? /* @__PURE__ */ React__default.createElement(Icon, {
+    style: { backgroundImage: `url(${iconBg() || ""})` }
+  }, !iconBg() ? /* @__PURE__ */ React__default.createElement(Icon, {
     name: "notice",
     size: "16",
     color
-  }) : null), /* @__PURE__ */ React__default.createElement("div", {
+  }) : null) : null, /* @__PURE__ */ React__default.createElement("div", {
     ref: wrap,
     className: "wrap"
   }, /* @__PURE__ */ React__default.createElement("div", {
     ref: content,
-    className: `content ${animationClass} ${!scrollable && !wrapable && "nut-ellipsis"}`,
+    className: `content ${animationClass} ${isEllipsis() && "nut-ellipsis"}`,
     style: contentStyle,
     onAnimationEnd
-  }, children, text)), closeMode ? /* @__PURE__ */ React__default.createElement("div", {
+  }, children, text)), closeMode || rightIcon ? /* @__PURE__ */ React__default.createElement("div", {
     className: "right-icon",
     onClick: onClickIcon
   }, /* @__PURE__ */ React__default.createElement(Icon, {
-    name: "close",
+    name: rightIcon || "close",
     color
-  })) : null) : scrollList.current.length > 0 && direction == "vertical" ? /* @__PURE__ */ React__default.createElement("div", {
+  })) : null) : null, scrollList.current.length > 0 && direction === "vertical" ? /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-noticebar-vertical",
     style: barStyle
   }, children ? /* @__PURE__ */ React__default.createElement("div", {
@@ -13861,8 +13935,8 @@ const Avatar = (props) => {
     height: sizeValue.indexOf(size) > -1 ? "" : `${size}px`,
     backgroundColor: `${bgColor}`,
     color: `${color}`,
-    marginLeft: avatarIndex != 1 && ((_c = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _c.span) ? `${(_d = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _d.span}px` : "",
-    zIndex: ((_e = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _e.zIndex) == "right" ? `${Math.abs(maxSum - avatarIndex)}` : "",
+    marginLeft: avatarIndex !== 1 && ((_c = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _c.span) ? `${(_d = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _d.span}px` : "",
+    zIndex: ((_e = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _e.zIndex) === "right" ? `${Math.abs(maxSum - avatarIndex)}` : "",
     ...style
   };
   const maxStyles = {
@@ -13880,15 +13954,16 @@ const Avatar = (props) => {
   const avatarLength = (children2) => {
     var _a2, _b2, _c2;
     for (let i = 0; i < children2.length; i++) {
-      if (children2[i] && children2[i].classList && children2[i].classList[0] == "nut-avatar") {
+      console.log("child", children2[i], children2[i].classList);
+      if (children2[i] && children2[i].classList && children2[i].classList[0] === "nut-avatar") {
         children2[i].setAttribute("data-index", i + 1);
       }
     }
-    const index2 = (_b2 = (_a2 = avatarRef == null ? void 0 : avatarRef.current) == null ? void 0 : _a2.dataset) == null ? void 0 : _b2.index;
+    const index2 = Number((_b2 = (_a2 = avatarRef == null ? void 0 : avatarRef.current) == null ? void 0 : _a2.dataset) == null ? void 0 : _b2.index);
     const maxCount = (_c2 = parent == null ? void 0 : parent.propAvatarGroup) == null ? void 0 : _c2.maxCount;
     setMaxSum(children2.length);
     setAvatarIndex(index2);
-    if (index2 == children2.length && index2 != maxCount && children2.length > maxCount) {
+    if (index2 === children2.length && index2 !== maxCount && children2.length > maxCount) {
       setShowMax(true);
     }
   };
@@ -13976,14 +14051,24 @@ const Price = (props) => {
     ...props
   };
   const b2 = cn("price");
+  const replaceSpecialChar = (symbol2) => {
+    let desSymbol = symbol2;
+    desSymbol = symbol2.replace(/&quot;/g, '"');
+    desSymbol = symbol2.replace(/&amp;/g, "&");
+    desSymbol = symbol2.replace(/&lt;/g, "<");
+    desSymbol = symbol2.replace(/&gt;/g, ">");
+    desSymbol = symbol2.replace(/&nbsp;/g, " ");
+    desSymbol = symbol2.replace(/&yen;/g, "\uFFE5");
+    return desSymbol;
+  };
   const showSymbol = () => {
-    return { __html: (needSymbol ? symbol : "") || "" };
+    return { __html: (needSymbol ? replaceSpecialChar(symbol) : "") || "" };
   };
   const checkPoint = (price2) => {
     return String(price2).indexOf(".") > 0;
   };
   const formatThousands = (num) => {
-    if (Number(num) == 0) {
+    if (Number(num) === 0) {
       num = 0;
     }
     if (checkPoint(num)) {
@@ -13998,7 +14083,7 @@ const Price = (props) => {
     return num;
   };
   const formatDecimal = (decimalNum) => {
-    if (Number(decimalNum) == 0) {
+    if (Number(decimalNum) === 0) {
       decimalNum = 0;
     }
     if (checkPoint(decimalNum)) {
@@ -14162,7 +14247,7 @@ const Tag = (props) => {
     className: "_icon",
     name: "close",
     size: "12",
-    click: (e2) => {
+    onClick: (e2) => {
       setIsTagShow(false);
       if (props.onClose) {
         props.onClose(e2);
@@ -14220,12 +14305,6 @@ class Trigger extends React__default.Component {
     return trigger;
   }
 }
-function findDOMNode(node) {
-  if (node instanceof HTMLElement) {
-    return node;
-  }
-  return ReactDOM__default.findDOMNode(node);
-}
 const getEleAttr = (ele) => {
   if (ele && ele.getBoundingClientRect) {
     return ele.getBoundingClientRect();
@@ -14237,8 +14316,11 @@ const defaultProps$k = {
   theme: "light",
   location: "bottom",
   visible: false,
+  offset: 20,
   className: "",
   onClick: (e2) => {
+  },
+  onChoose: (item, index2) => {
   }
 };
 const Popover = (props) => {
@@ -14248,20 +14330,21 @@ const Popover = (props) => {
     theme,
     location,
     visible,
+    offset,
     className,
     style,
     onClick,
+    onChoose,
     ...reset
   } = {
     ...defaultProps$k,
     ...props
   };
   const goodItem = useRef(null);
-  const aa = goodItem.current && findDOMNode(goodItem.current);
   setTimeout(() => {
-    if (aa) {
-      setElWidth(getEleAttr(aa).width);
-      setElHeight(getEleAttr(aa).height);
+    if (goodItem.current && getEleAttr(goodItem.current)) {
+      setElWidth(getEleAttr(goodItem.current).width);
+      setElHeight(getEleAttr(goodItem.current).height);
     }
   });
   const [classes, setClasses] = useState("");
@@ -14275,68 +14358,46 @@ const Popover = (props) => {
     setPopoverArrow(popoverArrowSelf());
   }, [list, theme]);
   const getStyle = () => {
+    const offNumer = Number(offset) ? Number(offset) : 0;
     const style2 = {};
-    if (location === "top") {
-      style2.bottom = elHeight + 20;
-      style2.left = 0;
-    } else if (location === "right") {
-      style2.top = 0;
-      style2.right = -elWidth - 20;
-    } else if (location === "left") {
-      style2.top = 0;
-      style2.left = -elWidth - 20;
-    } else {
-      style2.top = elHeight + 20;
-      style2.left = 0;
-    }
-    style2.top += "px";
-    style2.left += "px";
-    style2.bottom += "px";
-    style2.right += "px";
-    return style2;
-  };
-  const getArrowStyle = () => {
-    const style2 = {};
-    if (location === "top") {
-      style2.bottom = -20;
-      style2.left = elWidth / 2;
-    } else if (location === "right") {
-      style2.top = 20;
-      style2.left = -20;
-    } else if (location === "left") {
-      style2.top = 20;
-      style2.right = -20;
+    if (location.includes("top")) {
+      style2.bottom = `${elHeight + offNumer}px`;
+    } else if (location.includes("right")) {
+      style2.left = `${elWidth + offNumer}px`;
+    } else if (location.includes("left")) {
+      style2.right = `${elWidth + offNumer}px`;
     } else {
-      style2.left = elWidth / 2;
-      style2.top = -20;
+      style2.top = `${elHeight + offNumer}px`;
     }
-    style2.top += "px";
-    style2.left += "px";
-    style2.bottom += "px";
-    style2.right += "px";
     return style2;
   };
   const classesSelf = () => {
     const prefixCls = "nut-popover";
-    return `${prefixCls}
-    ${theme ? `${prefixCls}--${theme}` : ""}`;
+    return `${prefixCls} ${theme ? `${prefixCls}--${theme}` : ""}`;
   };
   const popoverContentSelf = () => {
-    const prefixCls = "popoverContent";
-    return `${prefixCls}
-    ${location ? `${prefixCls}--${location}` : ""}`;
+    const prefixCls = "popover-content";
+    return `${prefixCls}-show ${prefixCls} ${location ? `${prefixCls}--${location}` : ""}`;
+  };
+  const filter = () => {
+    const ms = ["top", "bottom", "left", "right"];
+    return ms.filter((m2) => location.includes(m2))[0];
   };
   const popoverArrowSelf = () => {
-    const prefixCls = "popoverArrow";
-    return `${prefixCls}
-    ${location ? `${prefixCls}--${location}` : ""}`;
+    const prefixCls = "popover-arrow";
+    return `${prefixCls} ${prefixCls}-${filter()} ${location ? `${prefixCls}--${location}` : ""}`;
   };
   const handleClick2 = (e2) => {
     if (props.onClick) {
       props.onClick(e2);
     }
   };
-  return /* @__PURE__ */ React__default.createElement("div", {
+  const handleChoose = (item, index2) => {
+    if (!item.disabled) {
+      onChoose(item, index2);
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
     className: `${classes} ${className}`,
     style: { ...style },
     ...reset
@@ -14348,19 +14409,25 @@ const Popover = (props) => {
     className: `${popoverContent}`,
     style: getStyle()
   }, /* @__PURE__ */ React__default.createElement("div", {
-    className: `${popoverArrow}`,
-    style: getArrowStyle()
-  }, " "), Array.isArray(children) ? children[1] : "", list.map((item) => {
+    className: `${popoverArrow}`
+  }), Array.isArray(children) ? children[1] : "", list.map((item, i) => {
     return /* @__PURE__ */ React__default.createElement("div", {
       key: item.name,
-      className: `title-item ${item.disabled ? "disabled" : ""}`
+      className: `popover-menu-item ${item.disabled ? "disabled" : ""}`,
+      onClick: () => {
+        handleChoose(item, i);
+      }
     }, item.icon ? /* @__PURE__ */ React__default.createElement(Icon, {
-      className: "item-img",
+      className: "popover-menu-item-img",
       name: item.icon
     }) : "", /* @__PURE__ */ React__default.createElement("div", {
-      className: "title-name"
+      className: "popover-menu-item-name"
     }, item.name));
-  })) : null)));
+  })) : null))), visible ? /* @__PURE__ */ React__default.createElement(Overlay, {
+    visible,
+    onClick: (e2) => handleClick2(e2),
+    style: { background: "transparent" }
+  }) : "");
 };
 Popover.defaultProps = defaultProps$k;
 Popover.displayName = "NutPopover";