@nutui/nutui-react 1.2.3-beta.4 → 2.0.0-beta.0

package/dist/nutui.react.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.2.3-beta.4 Fri Aug 19 2022 09:34:33 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-beta.0 Wed Aug 24 2022 13:54:14 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -75,18 +75,18 @@
   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,
@@ -97,7 +97,7 @@
       className,
       fontClassName,
       style,
-      click,
+      onClick,
       ...rest
     } = {
       ...defaultProps$1a,
@@ -107,8 +107,8 @@
     const type = isImage ? "img" : tag;
     const b2 = cn("icon");
     const handleClick2 = (e2) => {
-      if (props.click) {
-        props.click(e2);
+      if (onClick) {
+        onClick(e2);
       }
     };
     const hasSrc = () => {
@@ -119,9 +119,7 @@
     return React__default["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),
@@ -135,7 +133,7 @@
       },
       children
     );
-  };
+  }
   Icon.defaultProps = defaultProps$1a;
   Icon.displayName = "NutIcon";
   const defaultProps$19 = {
@@ -2816,7 +2814,7 @@
   const defaultProps$Z = {
     dot: false,
     size: "",
-    classPrefix: "nutui-iconfont",
+    classPrefix: "nut-icon",
     tabTitle: "",
     icon: "",
     href: "",
@@ -3749,8 +3747,11 @@
     }
     render() {
       const {
+        id,
         style,
         icon,
+        iconSize,
+        title,
         msg,
         bottom,
         center,
@@ -3768,14 +3769,16 @@
         "nut-toast-has-icon": icon,
         "nut-toast-cover": cover,
         "nut-toast-loading": type === "loading",
-        customClass,
+        [`${customClass}`]: true,
         [`nut-toast-${size}`]: true
       });
       return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.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();
@@ -3790,8 +3793,11 @@
         className: toastBem("icon-wrapper")
       }, /* @__PURE__ */ React__namespace.createElement(Icon, {
         name: icon || "",
-        size: "20"
-      })) : null, /* @__PURE__ */ React__namespace.createElement("span", {
+        color: "#ffffff",
+        size: iconSize
+      })) : null, title ? /* @__PURE__ */ React__namespace.createElement("div", {
+        className: "nut-toast-title"
+      }, title) : null, /* @__PURE__ */ React__namespace.createElement("span", {
         className: toastBem("text")
       }, msg))));
     }
@@ -3825,13 +3831,16 @@
   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)",
@@ -3923,9 +3932,6 @@
       buttonColor,
       hiddenRange,
       hiddenTag,
-      min,
-      max,
-      step,
       modelValue,
       button,
       vertical,
@@ -3934,6 +3940,10 @@
       dragStart,
       dragEnd
     } = { ...defaultProps$R, ...props };
+    let { min, max, step } = { ...defaultProps$R, ...props };
+    min = Number(min);
+    max = Number(max);
+    step = Number(step);
     const [buttonIndex, SetButtonIndex] = React.useState(0);
     const [initValue, SetInitValue] = React.useState();
     const [dragStatus, SetDragStatus] = React.useState("start");
@@ -4459,7 +4469,7 @@
         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;
@@ -4467,14 +4477,14 @@
       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();
@@ -4482,7 +4492,7 @@
       }
     };
     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;
@@ -4499,7 +4509,7 @@
           } 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]];
@@ -4520,20 +4530,23 @@
       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 [
@@ -4543,7 +4556,7 @@
       ];
     };
     const getDaysStatus = (days, type2) => {
-      if (type2 == "prev" && days >= 7) {
+      if (type2 === "prev" && days >= 7) {
         days -= 7;
       }
       return Array.from(Array(days), (v2, k2) => {
@@ -4568,7 +4581,7 @@
           ...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],
@@ -4634,7 +4647,7 @@
         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);
@@ -4645,7 +4658,7 @@
         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);
@@ -4804,7 +4817,7 @@
       className: "calendar-curr-tips"
     }, locale.calendaritem.today) : "", isStartTip(day, month) ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "calendar-day-tip"
-    }, locale.calendaritem.start) : isEndTip(day, month) ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    }, locale.calendaritem.start) : "", isEndTip(day, month) ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "calendar-day-tip"
     }, locale.calendaritem.end) : "")))))))), poppable && !isAutoBackFill ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-calendar-footer"
@@ -4910,7 +4923,6 @@
             const childrenLabel = [];
             React__default["default"].Children.map(children, (child) => {
               const childProps = child.props;
-              console.log(child);
               childrenLabel.push(childProps.label || child.children);
             });
             setInnerValue(childrenLabel);
@@ -5081,9 +5093,11 @@
       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] = React.useState(1);
@@ -5103,7 +5117,7 @@
       }
       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;
@@ -5163,7 +5177,7 @@
       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");
       }
@@ -5263,6 +5277,7 @@
       className,
       style,
       threeDimensional,
+      swipeDuration,
       ...rest
     } = props;
     const [chooseValueData, setchooseValueData] = React.useState([]);
@@ -5427,6 +5442,7 @@
         listData: item,
         threeDimensional,
         chooseItem: (value, index22) => chooseItem(value, index22),
+        swipeDuration,
         key: index2,
         keyIndex: index2
       });
@@ -5804,23 +5820,23 @@
       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);
       }
@@ -5828,8 +5844,8 @@
     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);
       }
@@ -5875,7 +5891,7 @@
       className: iconMinusClasses,
       size: buttonSize,
       name: "minus",
-      click: reduceNumber
+      onClick: reduceNumber
     }), /* @__PURE__ */ React__default["default"].createElement("input", {
       type: "number",
       min,
@@ -5891,7 +5907,7 @@
       className: iconAddClasses,
       size: buttonSize,
       name: "plus",
-      click: addNumber
+      onClick: addNumber
     }));
   };
   InputNumber.defaultProps = defaultProps$L;
@@ -6039,12 +6055,17 @@
     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);
       }
@@ -6186,7 +6207,7 @@
       className: "nut-input-clear",
       name: clearIcon,
       size: clearSize,
-      click: (e2) => {
+      onClick: (e2) => {
         handleClear(e2);
       }
     }) : null, rightIcon && rightIcon.length > 0 ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -6693,6 +6714,9 @@
       disabled,
       readOnly: readonly,
       value: inputValue,
+      onInput: (e2) => {
+        textChange(e2);
+      },
       onChange: (e2) => {
         textChange(e2);
       },
@@ -6886,6 +6910,7 @@
               item.status = "ready";
               item.message = locale.uploader.readyUpload;
             }
+            return item;
           });
           return [...fileList2];
         });
@@ -6898,6 +6923,7 @@
               item.status = "uploading";
               item.message = locale.uploader.uploading;
             }
+            return item;
           });
           return [...fileList2];
         });
@@ -6911,6 +6937,7 @@
               item.status = "success";
               item.message = locale.uploader.success;
             }
+            return item;
           });
           return [...fileList2];
         });
@@ -6926,6 +6953,7 @@
               item.status = "error";
               item.message = locale.uploader.error;
             }
+            return item;
           });
           return [...fileList2];
         });
@@ -7055,7 +7083,7 @@
       return /* @__PURE__ */ React__default["default"].createElement("div", {
         className: `nut-uploader__preview ${listType}`,
         key: item.uid
-      }, listType == "picture" && !children && /* @__PURE__ */ React__default["default"].createElement("div", {
+      }, listType === "picture" && !children && /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "nut-uploader__preview-img"
       }, item.status === "ready" ? /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "nut-uploader__preview__progress"
@@ -7065,21 +7093,23 @@
         className: "nut-uploader__preview__progress"
       }, /* @__PURE__ */ React__default["default"].createElement(Icon, {
         color: "#fff",
-        name: `${item.status == "error" ? "failure" : "loading"}`
+        name: `${item.status === "error" ? "failure" : "loading"}`
       }), /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "nut-uploader__preview__progress__msg"
       }, item.message)), isDeletable && /* @__PURE__ */ React__default["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["default"].createElement(React__default["default"].Fragment, null, item.url && /* @__PURE__ */ React__default["default"].createElement("img", {
         className: "nut-uploader__preview-img__c",
         src: item.url,
+        alt: "",
         onClick: () => handleItemClick(item)
       })) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, defaultImg ? /* @__PURE__ */ React__default["default"].createElement("img", {
         className: "nut-uploader__preview-img__c",
         src: defaultImg,
+        alt: "",
         onClick: () => handleItemClick(item)
       }) : /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "nut-uploader__preview-img__file"
@@ -7091,7 +7121,7 @@
         name: "link"
       }), "\xA0", item.name))), /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "tips"
-      }, item.name)), listType == "list" && /* @__PURE__ */ React__default["default"].createElement("div", {
+      }, item.name)), listType === "list" && /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "nut-uploader__preview-list"
       }, /* @__PURE__ */ React__default["default"].createElement("div", {
         className: `nut-uploader__preview-img__file__name ${item.status}`,
@@ -7102,9 +7132,9 @@
         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["default"].createElement("div", {
+    }), maximum > fileList.length && listType === "picture" && !children && /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `nut-uploader__upload ${listType}`
     }, /* @__PURE__ */ React__default["default"].createElement(Icon, {
       size: uploadIconSize,
@@ -12156,7 +12186,7 @@
       ({ 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 {
@@ -12718,11 +12748,22 @@
       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
       });
@@ -12731,7 +12772,9 @@
         timeout: 300,
         classNames: "fade",
         unmountOnExit: true,
-        appear: true
+        appear: true,
+        position,
+        isWrapTeleport
       }, /* @__PURE__ */ React__namespace.createElement("div", {
         className: `${classes} ${className}`,
         style: {
@@ -12774,8 +12817,11 @@
     msg: "",
     id: "",
     duration: 3e3,
+    color: "",
     type: "danger",
     className: "",
+    position: "top",
+    isWrapTeleport: true,
     onClosed: () => {
     },
     onClick: () => {
@@ -13019,7 +13065,7 @@
     color: "",
     background: "",
     delay: 1,
-    scrollable: true,
+    scrollable: null,
     speed: 50
   };
   const NoticeBar = (props) => {
@@ -13057,6 +13103,7 @@
     const [animate, SetAnimate] = React.useState(false);
     const [distance, SetDistance] = React.useState(0);
     const [timer, SetTimer] = React.useState(0);
+    const [isCanScroll, SetIsCanScroll] = React.useState(null);
     React.useState(0);
     React.useEffect(() => {
       if (direction === "vertical") {
@@ -13083,12 +13130,13 @@
     }, []);
     const cloneChild = (listItem, listIndex) => {
       return React__default["default"].Children.map(children, function(child, index2) {
-        if (child && index2 == listIndex) {
+        if (child && index2 === listIndex) {
           return React__default["default"].cloneElement(child, {
             key: listIndex,
             children: listItem
           });
         }
+        return null;
       });
     };
     React.useEffect(() => {
@@ -13109,7 +13157,9 @@
         }
         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);
@@ -13117,7 +13167,7 @@
         } else {
           SetAnimationClass("");
         }
-      });
+      }, 0);
     };
     const handleClick2 = (event) => {
       click && click(event);
@@ -13179,19 +13229,39 @@
     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");
@@ -13204,32 +13274,32 @@
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `${b2()} ${className || ""}`,
       style
-    }, showNoticeBar && direction == "across" ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    }, showNoticeBar && direction === "across" ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: noticebarClass,
       style: barStyle,
       onClick: handleClick2
-    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    }, iconShow() ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "left-icon",
-      style: { backgroundImage: `url(${leftIcon || ""})` }
-    }, !leftIcon ? /* @__PURE__ */ React__default["default"].createElement(Icon, {
+      style: { backgroundImage: `url(${iconBg() || ""})` }
+    }, !iconBg() ? /* @__PURE__ */ React__default["default"].createElement(Icon, {
       name: "notice",
       size: "16",
       color
-    }) : null), /* @__PURE__ */ React__default["default"].createElement("div", {
+    }) : null) : null, /* @__PURE__ */ React__default["default"].createElement("div", {
       ref: wrap,
       className: "wrap"
     }, /* @__PURE__ */ React__default["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["default"].createElement("div", {
+    }, children, text)), closeMode || rightIcon ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "right-icon",
       onClick: onClickIcon
     }, /* @__PURE__ */ React__default["default"].createElement(Icon, {
-      name: "close",
+      name: rightIcon || "close",
       color
-    })) : null) : scrollList.current.length > 0 && direction == "vertical" ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    })) : null) : null, scrollList.current.length > 0 && direction === "vertical" ? /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-noticebar-vertical",
       style: barStyle
     }, children ? /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -13892,8 +13962,8 @@
       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 = {
@@ -13911,15 +13981,16 @@
     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);
       }
     };
@@ -14007,14 +14078,24 @@
       ...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)) {
@@ -14029,7 +14110,7 @@
       return num;
     };
     const formatDecimal = (decimalNum) => {
-      if (Number(decimalNum) == 0) {
+      if (Number(decimalNum) === 0) {
         decimalNum = 0;
       }
       if (checkPoint(decimalNum)) {
@@ -14193,7 +14274,7 @@
       className: "_icon",
       name: "close",
       size: "12",
-      click: (e2) => {
+      onClick: (e2) => {
         setIsTagShow(false);
         if (props.onClose) {
           props.onClose(e2);
@@ -14251,12 +14332,6 @@
       return trigger;
     }
   }
-  function findDOMNode(node) {
-    if (node instanceof HTMLElement) {
-      return node;
-    }
-    return ReactDOM__default["default"].findDOMNode(node);
-  }
   const getEleAttr = (ele) => {
     if (ele && ele.getBoundingClientRect) {
       return ele.getBoundingClientRect();
@@ -14268,8 +14343,11 @@
     theme: "light",
     location: "bottom",
     visible: false,
+    offset: 20,
     className: "",
     onClick: (e2) => {
+    },
+    onChoose: (item, index2) => {
     }
   };
   const Popover = (props) => {
@@ -14279,20 +14357,21 @@
       theme,
       location,
       visible,
+      offset,
       className,
       style,
       onClick,
+      onChoose,
       ...reset
     } = {
       ...defaultProps$k,
       ...props
     };
     const goodItem = React.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] = React.useState("");
@@ -14306,68 +14385,46 @@
       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["default"].createElement("div", {
+    const handleChoose = (item, index2) => {
+      if (!item.disabled) {
+        onChoose(item, index2);
+      }
+    };
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `${classes} ${className}`,
       style: { ...style },
       ...reset
@@ -14379,19 +14436,25 @@
       className: `${popoverContent}`,
       style: getStyle()
     }, /* @__PURE__ */ React__default["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["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["default"].createElement(Icon, {
-        className: "item-img",
+        className: "popover-menu-item-img",
         name: item.icon
       }) : "", /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: "title-name"
+        className: "popover-menu-item-name"
       }, item.name));
-    })) : null)));
+    })) : null))), visible ? /* @__PURE__ */ React__default["default"].createElement(Overlay, {
+      visible,
+      onClick: (e2) => handleClick2(e2),
+      style: { background: "transparent" }
+    }) : "");
   };
   Popover.defaultProps = defaultProps$k;
   Popover.displayName = "NutPopover";