@nutui/nutui-react 3.1.0-beta.1 → 4.0.0-beta.1

package/dist/nutui.react.umd.js

@@ -1321,7 +1321,7 @@ React keys must be passed directly to JSX without using spread:
     }
   });
   var Button = /* @__PURE__ */ React.forwardRef(function(props, ref) {
-    var _ref = _object_spread({}, defaultProps$1C, props), color = _ref.color, shape = _ref.shape, fill = _ref.fill, loading = _ref.loading, disabled = _ref.disabled, type2 = _ref.type, size = _ref.size, block = _ref.block, icon = _ref.icon, rightIcon = _ref.rightIcon, children = _ref.children, className = _ref.className, style = _ref.style, nativeType = _ref.nativeType, onClick = _ref.onClick, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$1C, props), color = _ref.color, shape = _ref.shape, fill = _ref.fill, loading = _ref.loading, disabled = _ref.disabled, type2 = _ref.type, size = _ref.size, block = _ref.block, icon = _ref.icon, rightIcon = _ref.rightIcon, children = _ref.children, className = _ref.className, style = _ref.style, nativeType = _ref.nativeType, description = _ref.description, onClick = _ref.onClick, rest = _object_without_properties(_ref, [
       "color",
       "shape",
       "fill",
@@ -1336,8 +1336,22 @@ React keys must be passed directly to JSX without using spread:
       "className",
       "style",
       "nativeType",
+      "description",
       "onClick"
     ]);
+    var mappedSize = React.useMemo(function() {
+      if (!size) return "normal";
+      var sizeMap = {
+        "48": "xlarge",
+        "40": "large",
+        "32": "normal",
+        "28": "small",
+        "24": "mini"
+      };
+      return sizeMap[size] || size;
+    }, [
+      size
+    ]);
     var getStyle = React.useMemo(function() {
       var style2 = {};
       if (color) {
@@ -1347,7 +1361,7 @@ React keys must be passed directly to JSX without using spread:
             style2.borderColor = color;
           }
         } else {
-          style2.color = "#fff";
+          style2.color = "var(--nutui-color-primary-text, #fff)";
           style2.background = color;
           style2.borderColor = "transparent";
         }
@@ -1367,20 +1381,30 @@ React keys must be passed directly to JSX without using spread:
       onClick
     ]);
     var _obj;
-    var buttonClassNames = classNames(prefixCls$2, "".concat(prefixCls$2, "-").concat(type2), (_obj = {}, _define_property(_obj, "".concat(prefixCls$2, "-").concat(type2, "-solid"), type2 === "primary" && !props.fill), _define_property(_obj, "".concat(prefixCls$2, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls$2, "-").concat(type2, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls$2, "-").concat(size), size), _define_property(_obj, "".concat(prefixCls$2, "-").concat(shape), shape), _define_property(_obj, "".concat(prefixCls$2, "-block"), block), _define_property(_obj, "".concat(prefixCls$2, "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls$2, "-").concat(type2).concat(props.fill ? "-".concat(fill) : "", "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls$2, "-loading"), loading), _define_property(_obj, "".concat(prefixCls$2, "-icononly"), !children), _obj), className);
+    var buttonClassNames = classNames(prefixCls$2, "".concat(prefixCls$2, "-").concat(type2), (_obj = {}, _define_property(_obj, "".concat(prefixCls$2, "-").concat(type2, "-solid"), type2 === "primary" && !props.fill), _define_property(_obj, "".concat(prefixCls$2, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls$2, "-").concat(type2, "-").concat(fill), props.fill), _define_property(_obj, "".concat(prefixCls$2, "-").concat(mappedSize), mappedSize), _define_property(_obj, "".concat(prefixCls$2, "-has-desc"), !!description), _define_property(_obj, "".concat(prefixCls$2, "-").concat(shape), shape), _define_property(_obj, "".concat(prefixCls$2, "-block"), block), _define_property(_obj, "".concat(prefixCls$2, "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls$2, "-").concat(type2).concat(props.fill ? "-".concat(fill) : "", "-disabled"), disabled || loading), _define_property(_obj, "".concat(prefixCls$2, "-loading"), loading), _define_property(_obj, "".concat(prefixCls$2, "-icononly"), !children), _obj), className);
     return /* @__PURE__ */ React.createElement("button", _object_spread_props(_object_spread({}, rest), {
       ref,
       type: nativeType,
       className: buttonClassNames,
       style: _object_spread({}, getStyle, style),
+      "aria-disabled": disabled || loading,
+      "aria-busy": loading,
       onClick: handleClick
     }), /* @__PURE__ */ React.createElement("div", {
       className: "nut-button-wrap"
     }, loading && /* @__PURE__ */ React.createElement(s, {
-      className: "nut-icon-loading"
+      className: "nut-icon-loading",
+      "aria-hidden": "true"
     }), !loading && icon, children && /* @__PURE__ */ React.createElement("div", {
-      className: "".concat(props.fill || disabled || loading ? "nut-button-".concat(type2).concat(props.fill ? "-".concat(fill) : "").concat(disabled || loading ? "-disabled" : "") : "").concat(icon || loading ? " nut-button-text" : "").concat(rightIcon ? " nut-button-text-right" : "")
-    }, children), rightIcon));
+      className: classNames({
+        "nut-button-text": icon || loading,
+        "nut-button-text-right": rightIcon
+      })
+    }, description ? /* @__PURE__ */ React.createElement("div", {
+      className: "nut-button-title"
+    }, children) : children, description && /* @__PURE__ */ React.createElement("div", {
+      className: "nut-button-desc"
+    }, description)), rightIcon));
   });
   Button.displayName = "NutButton";
   var CellGroupContext = React.createContext(null);
@@ -1791,6 +1815,11 @@ React keys must be passed directly to JSX without using spread:
     edit: "编辑",
     reset: "重置",
     close: "关闭",
+    back: "返回",
+    clear: "清除",
+    image: {
+      errorTip: "图片加载失败"
+    },
     video: {
       errorTip: "视频加载失败",
       clickRetry: "点击重试"
@@ -1830,7 +1859,16 @@ React keys must be passed directly to JSX without using spread:
       },
       today: "今天",
       loadPreviousMonth: "加载上一个月",
-      noEarlierMonth: "没有更早月份"
+      noEarlierMonth: "没有更早月份",
+      dayAriaLabel: function(year, month, day, today, isActive, isDisable) {
+        if (isActive) {
+          return today ? "已选定今日".concat(month, "月").concat(day, "号") : "已选定".concat(month, "月").concat(day, "号");
+        }
+        if (isDisable) {
+          return today ? "".concat(month, "月").concat(day, "号今日按钮变暗") : "".concat(month, "月").concat(day, "号按钮变暗");
+        }
+        return today ? "".concat(month, "月").concat(day, "号今日") : "".concat(month, "月").concat(day, "号");
+      }
     },
     shortpassword: {
       title: "请输入密码",
@@ -14322,9 +14360,10 @@ Please add \`${key2}Action\` when creating your handler.`);
       return cls;
     };
     var renderLabel = function() {
-      return /* @__PURE__ */ React.createElement("span", {
+      var hasLabel = children || label;
+      return hasLabel ? /* @__PURE__ */ React.createElement("span", {
         className: classNames("".concat(classPrefix$j, "-label "), _define_property({}, "".concat(classPrefix$j, "-label-disabled"), innerDisabled))
-      }, children || label);
+      }, hasLabel) : null;
     };
     var handleClick = function() {
       if (disabled) return;
@@ -14353,7 +14392,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     };
     var _obj;
     return /* @__PURE__ */ React.createElement("div", _object_spread_props(_object_spread({
-      className: classNames(classPrefix$j, (_obj = {}, _define_property(_obj, "".concat(classPrefix$j, "-reverse"), labelPosition === "left"), _define_property(_obj, "nut-checkbox-list-item", ctx2 === null || ctx2 === void 0 ? void 0 : ctx2.list), _define_property(_obj, "".concat(classPrefix$j, "-active"), innerChecked), _obj), className)
+      className: classNames(classPrefix$j, (_obj = {}, _define_property(_obj, "".concat(classPrefix$j, "-reverse"), labelPosition === "left"), _define_property(_obj, "nut-checkbox-list-item", ctx2 === null || ctx2 === void 0 ? void 0 : ctx2.list), _define_property(_obj, "".concat(classPrefix$j, "-active"), innerChecked), _define_property(_obj, "".concat(classPrefix$j, "-nolabel"), !(children || label)), _obj), className)
     }, rest), {
       onClick: handleClick
     }), renderCheckboxItem());
@@ -15167,6 +15206,13 @@ Please add \`${key2}Action\` when creating your handler.`);
     if (rangeType === "year-month" && formattedDate.length < 3) {
       formattedDate.push(new Date(defaultDate).getDate());
     }
+    if ((rangeType === "time" || rangeType === "hour-minutes") && formattedDate.length < 6) {
+      var defaultDateObj = new Date(defaultDate);
+      formattedDate.unshift(defaultDateObj.getFullYear(), defaultDateObj.getMonth() + 1, defaultDateObj.getDate());
+      if (rangeType === "hour-minutes") {
+        formattedDate.push(0);
+      }
+    }
     var year = Number(formattedDate[0]);
     var month = Number(formattedDate[1]) - 1;
     var day = Math.min(Number(formattedDate[2]), getLastDayOfMonth(year, month + 1));
@@ -15259,11 +15305,9 @@ Please add \`${key2}Action\` when creating your handler.`);
         if (!isEqual$1((_this = new Date(selectedDate)) === null || _this === void 0 ? void 0 : _this.getTime(), newDate === null || newDate === void 0 ? void 0 : newDate.getTime())) {
           setInnerDate(formatValue(newDate, startDate, endDate));
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(selectedOptions, [
-          String(newDate.getFullYear()),
-          String(newDate.getMonth() + 1),
-          String(newDate.getDate())
-        ], index2);
+        onChange === null || onChange === void 0 ? void 0 : onChange(selectedOptions, selectedOptions.map(function(val2) {
+          return val2.value;
+        }), index2);
       }
     };
     var handleConfirmDateComparison = function(newDate) {
@@ -17561,7 +17605,9 @@ Please add \`${key2}Action\` when creating your handler.`);
       onClick: handleReduce
     }, /* @__PURE__ */ React.createElement(d$7, {
       className: classNames("".concat(classPrefix$h, "-icon ").concat(classPrefix$h, "-icon-minus"), _define_property({}, "".concat(classPrefix$h, "-icon-disabled"), Number(shadowValue) <= Number(min) || disabled))
-    })), /* @__PURE__ */ React.createElement("input", {
+    })), /* @__PURE__ */ React.createElement("div", {
+      className: "".concat(classPrefix$h, "-divider")
+    }), /* @__PURE__ */ React.createElement("input", {
       className: classNames("".concat(classPrefix$h, "-input"), _define_property({}, "".concat(classPrefix$h, "-input-disabled"), disabled)),
       ref: inputRef,
       inputMode: "decimal",
@@ -17571,6 +17617,8 @@ Please add \`${key2}Action\` when creating your handler.`);
       onInput: handleInputChange,
       onBlur: handleBlur,
       onFocus: handleFocus
+    }), /* @__PURE__ */ React.createElement("div", {
+      className: "".concat(classPrefix$h, "-divider")
     }), /* @__PURE__ */ React.createElement("div", {
       className: "".concat(classPrefix$h, "-add"),
       onClick: handlePlus
@@ -18157,8 +18205,8 @@ Please add \`${key2}Action\` when creating your handler.`);
       };
     }
     var color = function() {
-      var _obj;
-      return _obj = {}, _define_property(_obj, "".concat(classPrefix2, "-icon-disabled"), disabled), _define_property(_obj, "".concat(classPrefix2, "-icon"), !checkedStatement), _define_property(_obj, "".concat(classPrefix2, "-icon-checked"), checkedStatement), _obj;
+      var _obj2;
+      return _obj2 = {}, _define_property(_obj2, "".concat(classPrefix2, "-icon-disabled"), disabled), _define_property(_obj2, "".concat(classPrefix2, "-icon"), !checkedStatement), _define_property(_obj2, "".concat(classPrefix2, "-icon-checked"), checkedStatement), _obj2;
     };
     var renderIcon = function() {
       var icon = props.icon, activeIcon = props.activeIcon;
@@ -18182,13 +18230,13 @@ Please add \`${key2}Action\` when creating your handler.`);
     };
     var renderLabel = function() {
       var labelcls = classNames("".concat(classPrefix2, "-label"), _define_property({}, "".concat(classPrefix2, "-label-disabled"), disabled));
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), /* @__PURE__ */ React.createElement("div", {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), children && /* @__PURE__ */ React.createElement("div", {
         className: labelcls
       }, children));
     };
     var renderButton = function() {
-      var _obj;
-      var buttoncls = classNames("".concat(classPrefix2, "-button"), (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-button-active"), checkedStatement), _define_property(_obj, "".concat(classPrefix2, "-button-disabled"), disabled), _obj));
+      var _obj2;
+      var buttoncls = classNames("".concat(classPrefix2, "-button"), (_obj2 = {}, _define_property(_obj2, "".concat(classPrefix2, "-button-active"), checkedStatement), _define_property(_obj2, "".concat(classPrefix2, "-button-disabled"), disabled), _obj2));
       return /* @__PURE__ */ React.createElement("div", {
         className: buttoncls
       }, children);
@@ -18203,7 +18251,8 @@ Please add \`${key2}Action\` when creating your handler.`);
       if (disabled || checkedStatement) return;
       setCheckedStatement(!checkedStatement);
     };
-    var cls = classNames(classPrefix2, _define_property({}, "".concat(classPrefix2, "-reverse"), labelPosition === "left"), className);
+    var _obj;
+    var cls = classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-reverse"), labelPosition === "left"), _define_property(_obj, "".concat(classPrefix2, "-nolabel"), !children), _obj), className);
     return /* @__PURE__ */ React.createElement("div", _object_spread({
       className: cls,
       style,
@@ -19283,7 +19332,7 @@ Please add \`${key2}Action\` when creating your handler.`);
   var defaultProps$O = _object_spread_props(_object_spread({}, ComponentDefaults), {
     type: "png",
     lineWidth: 2,
-    strokeStyle: "#1A1A1A",
+    strokeStyle: "var(--nutui-color-title, #1a1a1a)",
     unsupported: ""
   });
   var InternalSignature = function(props, ref) {
@@ -19720,7 +19769,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     var _useState = _sliced_to_array(React.useState(0), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
     var stylesInner = {
       width: "".concat(displayPercent, "%"),
-      background: color || "#FF0F23",
+      background: color || "var(--nutui-color-primary, #ff0f23)",
       borderRadius: borderRadius && parseInt(borderRadius.toString()),
       transition: "width ".concat(duration || 300, "ms ease-in-out")
     };
@@ -22299,19 +22348,19 @@ Please add \`${key2}Action\` when creating your handler.`);
     var cls = classNames(classPrefix2, className);
     var defaultStatus2 = {
       success: /* @__PURE__ */ React.createElement(d$3, {
-        color: "#00D900"
+        color: "var(--nutui-color-success, #0acc2a)"
       }),
       error: /* @__PURE__ */ React.createElement(d$c, {
-        color: "#FF0F23"
+        color: "var(--nutui-color-primary, #ff0f23)"
       }),
       warning: /* @__PURE__ */ React.createElement(d, {
-        color: "#FFBF00"
+        color: "var(--nutui-color-warning, #ffaa00)"
       }),
       info: /* @__PURE__ */ React.createElement(p$1, {
-        color: "#0073FF"
+        color: "var(--nutui-color-info, #0c82f7)"
       }),
       waiting: /* @__PURE__ */ React.createElement(d$e, {
-        color: "#0073FF"
+        color: "var(--nutui-color-info, #0c82f7)"
       })
     };
     return /* @__PURE__ */ React.createElement("div", {
@@ -22444,6 +22493,8 @@ Please add \`${key2}Action\` when creating your handler.`);
       left: 0,
       right: 0
     }), 2), actionWidth = _useState1[0], setActionWidth = _useState1[1];
+    var actionWidthRef = React.useRef(actionWidth);
+    actionWidthRef.current = actionWidth;
     var wrapperStyle = {
       transform: "translate3d(".concat(state.offset, "px, 0, 0)"),
       transitionDuration: state.dragging ? "0s" : ".6s"
@@ -22470,7 +22521,7 @@ Please add \`${key2}Action\` when creating your handler.`);
         var newState = _object_spread_props(_object_spread({}, state), {
           dragging: true
         });
-        var isEdge = !opened || touch.deltaX.current * startOffset.current < 0;
+        var isEdge = !opened.current || touch.deltaX.current * startOffset.current < 0;
         if (isEdge) {
           preventDefault(event);
         }
@@ -22496,7 +22547,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     var toggle = function(side) {
       var offset = Math.abs(state.offset);
       var base = 0.3;
-      var baseNum = opened ? 1 - base : base;
+      var baseNum = opened.current ? 1 - base : base;
       var width2 = side === "left" ? leftWidth : rightWidth;
       if (width2 && offset > Number(width2) * baseNum) {
         open(side);
@@ -22546,26 +22597,28 @@ Please add \`${key2}Action\` when creating your handler.`);
     };
     var leftRef = React.useCallback(function(node) {
       if (node !== null) {
-        setActionWidth(function(v) {
-          return _object_spread_props(_object_spread({}, v), {
-            left: getNodeWidth(node)
+        var width2 = getNodeWidth(node);
+        if (width2 !== actionWidthRef.current.left) {
+          setActionWidth(function(v) {
+            return _object_spread_props(_object_spread({}, v), {
+              left: width2
+            });
           });
-        });
+        }
       }
-    }, [
-      props.leftAction
-    ]);
+    }, []);
     var rightRef = React.useCallback(function(node) {
       if (node !== null) {
-        setActionWidth(function(v) {
-          return _object_spread_props(_object_spread({}, v), {
-            right: getNodeWidth(node)
+        var width2 = getNodeWidth(node);
+        if (width2 !== actionWidthRef.current.right) {
+          setActionWidth(function(v) {
+            return _object_spread_props(_object_spread({}, v), {
+              right: width2
+            });
           });
-        });
+        }
       }
-    }, [
-      props.rightAction
-    ]);
+    }, []);
     var renderActionContent = function(side, measuredRef) {
       if (props["".concat(side, "Action")]) {
         return /* @__PURE__ */ React.createElement("div", {
@@ -22749,7 +22802,7 @@ Please add \`${key2}Action\` when creating your handler.`);
             className: "".concat(classPrefix$a, " ").concat(classes),
             id: "toast-".concat(id)
           }, /* @__PURE__ */ React__namespace.createElement("div", {
-            className: classNames("".concat(classPrefix$a, "-inner"), "".concat(classPrefix$a, "-").concat(position2), contentClassName, "".concat(classPrefix$a, "-inner-").concat(size), "".concat(classPrefix$a, "-inner-").concat(wordBreak), _define_property({}, "".concat(classPrefix$a, "-inner-descrption"), content2)),
+            className: classNames("".concat(classPrefix$a, "-inner"), "".concat(classPrefix$a, "-").concat(position2), contentClassName, "".concat(classPrefix$a, "-inner-").concat(size), "".concat(classPrefix$a, "-inner-").concat(wordBreak)),
             style: _object_spread({}, contentStyle),
             role: "alert",
             "aria-label": (title !== null && title !== void 0 ? title : "") + (content2 !== null && content2 !== void 0 ? content2 : "")
@@ -22799,7 +22852,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     contentClassName: "",
     contentStyle: {},
     wordBreak: "break-all",
-    duration: 2,
+    duration: 3,
     closeOnOverlayClick: false,
     lockScroll: false,
     zIndex: 1300,
@@ -23168,8 +23221,8 @@ Please add \`${key2}Action\` when creating your handler.`);
         currentDescription: null,
         maxDescription: null,
         minDescription: null,
-        "inactive-color": "#cccccc",
-        "active-color": "#FF0F23"
+        "inactive-color": "var(--nutui-color-text-disabled, #c2c4cc)",
+        "active-color": "var(--nutui-color-primary, #ff0f23)"
       })), /* @__PURE__ */ React.createElement("div", {
         className: "time"
       }, AudioRef.current ? formatSeconds("".concat(statusRef.current.second)) : "00:00:00")), /* @__PURE__ */ React.createElement("div", {
@@ -23401,7 +23454,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     strokeWidth: 5,
     radius: 50,
     strokeLinecap: "round",
-    color: "#FF0F23",
+    color: "var(--nutui-color-primary, #ff0f23)",
     background: "#e5e9f2",
     clockwise: true
   });