@nutui/nutui-react 3.0.18 → 3.0.19

package/dist/nutui.react.umd.js

@@ -1792,6 +1792,7 @@ React keys must be passed directly to JSX without using spread:
     select: "请选择",
     edit: "编辑",
     reset: "重置",
+    close: "关闭",
     video: {
       errorTip: "视频加载失败",
       clickRetry: "点击重试"
@@ -1937,7 +1938,8 @@ React keys must be passed directly to JSX without using spread:
     },
     watermark: {
       errorCanvasTips: "当前环境不支持Canvas"
-    }
+    },
+    mask: "蒙层"
   };
   function bound(position2, min, max) {
     var ret = position2;
@@ -5156,14 +5158,16 @@ React keys must be passed directly to JSX without using spread:
   });
   var Col = function(props) {
     var _$_object_spread = _object_spread({}, defaultProps$1u, props), className = _$_object_spread.className, style = _$_object_spread.style, span = _$_object_spread.span, offset = _$_object_spread.offset, children = _$_object_spread.children, isFirst = _$_object_spread.isFirst, isLast = _$_object_spread.isLast, onClick = _$_object_spread.onClick;
-    var _useState = _sliced_to_array(React.useState(""), 2), colName = _useState[0], setColName = _useState[1];
-    var _useState1 = _sliced_to_array(React.useState({}), 2), colStyle = _useState1[0], setColStyle = _useState1[1];
     var gutter = React.useContext(DataContext$1).gutter;
-    var classs = function() {
+    var classs = React.useMemo(function() {
       var prefixCls2 = "nut-col";
       return "".concat(prefixCls2, " ").concat(prefixCls2, "-").concat(span, " ").concat(gutter ? "".concat(prefixCls2, "-gutter") : "", " ").concat(prefixCls2, "-offset-").concat(offset);
-    };
-    var getStyle = function() {
+    }, [
+      offset,
+      span,
+      gutter
+    ]);
+    var getStyle = React.useMemo(function() {
       var style2 = {};
       if (!isFirst) {
         style2.paddingLeft = "".concat(gutter / 2, "px");
@@ -5172,14 +5176,19 @@ React keys must be passed directly to JSX without using spread:
         style2.paddingRight = "".concat(gutter / 2, "px");
       }
       return style2;
-    };
+    }, [
+      isFirst,
+      isLast,
+      gutter
+    ]);
+    var _useState = _sliced_to_array(React.useState(classs), 2), colName = _useState[0], setColName = _useState[1];
+    var _useState1 = _sliced_to_array(React.useState(getStyle), 2), colStyle = _useState1[0], setColStyle = _useState1[1];
     React.useEffect(function() {
       setColName(classs);
       setColStyle(getStyle);
     }, [
-      span,
-      offset,
-      gutter
+      classs,
+      getStyle
     ]);
     return /* @__PURE__ */ React.createElement("div", {
       className: classNames(colName, className),
@@ -11642,6 +11651,8 @@ Please add \`${key2}Action\` when creating your handler.`);
     portal: null,
     overlay: true,
     round: false,
+    resizable: false,
+    minHeight: "",
     onOpen: function() {
     },
     onClose: function() {
@@ -11651,27 +11662,44 @@ Please add \`${key2}Action\` when creating your handler.`);
     },
     onCloseIconClick: function() {
       return true;
+    },
+    onTouchStart: function() {
+    },
+    onTouchMove: function() {
+    },
+    onTouchEnd: function() {
     }
   });
   var _zIndex = 1100;
   var Popup = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps$1d, props), children = _$_object_spread.children, visible = _$_object_spread.visible, overlay = _$_object_spread.overlay, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, overlayStyle = _$_object_spread.overlayStyle, overlayClassName = _$_object_spread.overlayClassName, zIndex = _$_object_spread.zIndex, lockScroll = _$_object_spread.lockScroll, duration = _$_object_spread.duration, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, left = _$_object_spread.left, title = _$_object_spread.title, description = _$_object_spread.description, style = _$_object_spread.style, transition = _$_object_spread.transition, round = _$_object_spread.round, position2 = _$_object_spread.position, className = _$_object_spread.className, destroyOnClose = _$_object_spread.destroyOnClose, portal = _$_object_spread.portal, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, afterShow = _$_object_spread.afterShow, afterClose = _$_object_spread.afterClose, onClick = _$_object_spread.onClick;
+    var _$_object_spread = _object_spread({}, defaultProps$1d, props), children = _$_object_spread.children, visible = _$_object_spread.visible, overlay = _$_object_spread.overlay, closeOnOverlayClick = _$_object_spread.closeOnOverlayClick, overlayStyle = _$_object_spread.overlayStyle, overlayClassName = _$_object_spread.overlayClassName, zIndex = _$_object_spread.zIndex, lockScroll = _$_object_spread.lockScroll, duration = _$_object_spread.duration, closeable = _$_object_spread.closeable, closeIconPosition = _$_object_spread.closeIconPosition, closeIcon = _$_object_spread.closeIcon, left = _$_object_spread.left, title = _$_object_spread.title, top = _$_object_spread.top, description = _$_object_spread.description, style = _$_object_spread.style, transition = _$_object_spread.transition, round = _$_object_spread.round, position2 = _$_object_spread.position, className = _$_object_spread.className, destroyOnClose = _$_object_spread.destroyOnClose, portal = _$_object_spread.portal, resizable = _$_object_spread.resizable, minHeight = _$_object_spread.minHeight, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onOverlayClick = _$_object_spread.onOverlayClick, onCloseIconClick = _$_object_spread.onCloseIconClick, afterShow = _$_object_spread.afterShow, afterClose = _$_object_spread.afterClose, onClick = _$_object_spread.onClick, onTouchStart = _$_object_spread.onTouchStart, onTouchMove = _$_object_spread.onTouchMove, onTouchEnd = _$_object_spread.onTouchEnd, closeAriaLabel = _$_object_spread.closeAriaLabel;
     var nodeRef = React.useRef(null);
+    var topNodeRef = React.useRef(null);
     var innerIndex = zIndex || _zIndex;
     var _useState = _sliced_to_array(React.useState(innerIndex), 2), index2 = _useState[0], setIndex = _useState[1];
     var _useState1 = _sliced_to_array(React.useState(visible), 2), innerVisible = _useState1[0], setInnerVisible = _useState1[1];
     var _useState2 = _sliced_to_array(React.useState(true), 2), showChildren = _useState2[0], setShowChildren = _useState2[1];
     var _useState3 = _sliced_to_array(React.useState(""), 2), transitionName = _useState3[0], setTransitionName = _useState3[1];
+    var touchStartRef = React.useRef(0);
+    var touchMoveDistanceRef = React.useRef(0);
+    var heightRef = React.useRef(0);
+    var defaultHeightRef = React.useRef(0);
+    var isTouching = React.useRef(false);
+    var locale = useConfig().locale;
     useLockScroll(nodeRef, innerVisible && lockScroll);
     var classPrefix2 = "nut-popup";
     var overlayStyles = _object_spread({}, overlayStyle);
     var popStyles = _object_spread_props(_object_spread({}, style), {
-      zIndex: index2
+      zIndex: index2,
+      minHeight
     });
     var _obj;
     var popClassName = classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-round"), round || position2 === "bottom"), _define_property(_obj, "".concat(classPrefix2, "-").concat(position2), true), _obj), className);
     var open = function() {
       if (!innerVisible) {
+        if (position2 === "bottom" && resizable && nodeRef.current && heightRef.current) {
+          nodeRef.current.style.height = "".concat(defaultHeightRef.current, "px");
+        }
         setInnerVisible(true);
         setIndex(++innerIndex);
       }
@@ -11680,6 +11708,14 @@ Please add \`${key2}Action\` when creating your handler.`);
       }
       onOpen && onOpen();
     };
+    React.useEffect(function() {
+      if (topNodeRef.current && nodeRef.current) {
+        var _nodeRef_current;
+        topNodeRef.current.style.bottom = "".concat((_nodeRef_current = nodeRef.current) === null || _nodeRef_current === void 0 ? void 0 : _nodeRef_current.clientHeight, "px");
+      }
+    }, [
+      innerVisible
+    ]);
     var close = function() {
       if (innerVisible) {
         setInnerVisible(false);
@@ -11704,9 +11740,19 @@ Please add \`${key2}Action\` when creating your handler.`);
       var closeClasses = classNames("".concat(classPrefix2, "-title-right"), "".concat(classPrefix2, "-title-right-").concat(closeIconPosition));
       return /* @__PURE__ */ React.createElement(React.Fragment, null, closeable && /* @__PURE__ */ React.createElement("div", {
         className: closeClasses,
-        onClick: handleCloseIconClick
+        onClick: handleCloseIconClick,
+        role: "button",
+        "aria-label": closeAriaLabel || locale.close,
+        tabIndex: -1
       }, /* @__PURE__ */ React.isValidElement(closeIcon) ? closeIcon : /* @__PURE__ */ React.createElement(n$5, null)));
     };
+    var renderTop = function() {
+      if (!top) return null;
+      return /* @__PURE__ */ React.createElement("div", {
+        className: "".concat(classPrefix2, "-bottom-top"),
+        ref: topNodeRef
+      }, top);
+    };
     var renderTitle = function() {
       if (left || title || description) {
         return /* @__PURE__ */ React.createElement("div", {
@@ -11725,6 +11771,35 @@ Please add \`${key2}Action\` when creating your handler.`);
         return renderCloseIcon();
       }
     };
+    var handleTouchStart = function(event) {
+      var _nodeRef_current;
+      if (position2 !== "bottom" || !resizable || !nodeRef.current) return;
+      touchStartRef.current = event.touches[0].pageY;
+      isTouching.current = true;
+      heightRef.current = ((_nodeRef_current = nodeRef.current) === null || _nodeRef_current === void 0 ? void 0 : _nodeRef_current.offsetHeight) || 0;
+      if (!defaultHeightRef.current) defaultHeightRef.current = heightRef.current;
+      onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(heightRef.current, event);
+    };
+    var handleTouchMove = function(event) {
+      if (position2 !== "bottom" || !resizable || !nodeRef.current) return;
+      event.stopPropagation();
+      touchMoveDistanceRef.current = event.touches[0].pageY - touchStartRef.current;
+      var min = typeof minHeight === "number" ? minHeight : parseInt(String(minHeight || 0), 10) || 0;
+      var currentHeight = Math.max(min, heightRef.current - touchMoveDistanceRef.current);
+      nodeRef.current.style.height = "".concat(currentHeight, "px");
+      if (touchMoveDistanceRef.current > 0) {
+        onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(currentHeight, event, "down");
+      } else {
+        onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(currentHeight, event, "up");
+      }
+    };
+    var handleTouchEnd = function(event) {
+      if (position2 !== "bottom" || !resizable || !nodeRef.current) return;
+      isTouching.current = false;
+      var min = typeof minHeight === "number" ? minHeight : parseInt(String(minHeight || 0), 10) || 0;
+      var currentHeight = Math.max(min, heightRef.current - touchMoveDistanceRef.current);
+      onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(currentHeight, event);
+    };
     var renderPop = function() {
       return /* @__PURE__ */ React.createElement(CSSTransition, {
         nodeRef,
@@ -11739,8 +11814,12 @@ Please add \`${key2}Action\` when creating your handler.`);
         ref: nodeRef,
         style: popStyles,
         className: popClassName,
-        onClick
-      }, renderTitle(), showChildren && children));
+        onClick,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        onTouchCancel: handleTouchEnd
+      }, renderTop(), renderTitle(), showChildren && children));
     };
     var renderNode = function() {
       return /* @__PURE__ */ React.createElement(React.Fragment, null, overlay && /* @__PURE__ */ React.createElement(Overlay, {
@@ -14163,7 +14242,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), _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), _obj), className)
     }, rest), {
       onClick: handleClick
     }), renderCheckboxItem());
@@ -15133,7 +15212,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     return /* @__PURE__ */ React.createElement(React.Fragment, null, typeof children === "function" && children(selectedDate), /* @__PURE__ */ React.createElement("div", _object_spread({
       className: cls,
       style
-    }, rest), pickerOptions.length && /* @__PURE__ */ React.createElement(Picker, _object_spread_props(_object_spread({}, pickerProps), {
+    }, rest), pickerOptions.length > 0 && /* @__PURE__ */ React.createElement(Picker, _object_spread_props(_object_spread({}, pickerProps), {
       title,
       visible: innerVisible,
       value: pickerValue,
@@ -17014,7 +17093,7 @@ Please add \`${key2}Action\` when creating your handler.`);
   var Input = /* @__PURE__ */ React.forwardRef(function(props, ref) {
     var rtl = useRtl();
     var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps$Y, props), type2 = _ref.type, name2 = _ref.name, placeholder = _ref.placeholder, align = _ref.align, disabled = _ref.disabled, readOnly = _ref.readOnly, maxLength = _ref.maxLength, clearable = _ref.clearable, clearIcon = _ref.clearIcon, formatTrigger = _ref.formatTrigger, autoFocus = _ref.autoFocus, style = _ref.style, className = _ref.className, onChange = _ref.onChange, onFocus = _ref.onFocus, onClear = _ref.onClear, formatter = _ref.formatter, onClick = _ref.onClick, confirmType = _ref.confirmType, plain = _ref.plain, defaultValue = _ref.defaultValue, _value = _ref.value, onCompositionStart = _ref.onCompositionStart, onCompositionEnd = _ref.onCompositionEnd, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$Y, props), type2 = _ref.type, name2 = _ref.name, placeholder = _ref.placeholder, align = _ref.align, disabled = _ref.disabled, readOnly = _ref.readOnly, maxLength = _ref.maxLength, clearable = _ref.clearable, clearIcon = _ref.clearIcon, formatTrigger = _ref.formatTrigger, autoFocus = _ref.autoFocus, style = _ref.style, className = _ref.className, inputStyle = _ref.inputStyle, onChange = _ref.onChange, onFocus = _ref.onFocus, onClear = _ref.onClear, formatter = _ref.formatter, onClick = _ref.onClick, confirmType = _ref.confirmType, plain = _ref.plain, defaultValue = _ref.defaultValue, _value = _ref.value, onCompositionStart = _ref.onCompositionStart, onCompositionEnd = _ref.onCompositionEnd, rest = _object_without_properties(_ref, [
       "type",
       "name",
       "placeholder",
@@ -17028,6 +17107,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       "autoFocus",
       "style",
       "className",
+      "inputStyle",
       "onChange",
       "onFocus",
       "onClear",
@@ -17124,9 +17204,9 @@ Please add \`${key2}Action\` when creating your handler.`);
       ref: inputRef,
       name: name2,
       className: "nut-input-native",
-      style: {
+      style: _object_spread({}, {
         textAlign: getTextAlign()
-      },
+      }, inputStyle),
       type: getInputType(type2),
       maxLength,
       placeholder: placeholder === void 0 ? locale.placeholder : placeholder,
@@ -18781,7 +18861,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     var classPrefix2 = "nut-searchbar";
     var locale = useConfig().locale;
     var searchInputRef = React.useRef(null);
-    var _$_object_spread = _object_spread({}, defaultProps$P, props), outerValue = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, style = _$_object_spread.style, placeholder = _$_object_spread.placeholder, shape = _$_object_spread.shape, className = _$_object_spread.className, disabled = _$_object_spread.disabled, maxLength = _$_object_spread.maxLength, clearable = _$_object_spread.clearable, readOnly = _$_object_spread.readOnly, autoFocus = _$_object_spread.autoFocus, backable = _$_object_spread.backable, right = _$_object_spread.right, left = _$_object_spread.left, leftIn = _$_object_spread.leftIn, rightIn = _$_object_spread.rightIn, tag = _$_object_spread.tag, onChange = _$_object_spread.onChange, onFocus = _$_object_spread.onFocus, onBlur = _$_object_spread.onBlur, onClear = _$_object_spread.onClear, onSearch = _$_object_spread.onSearch, onInputClick = _$_object_spread.onInputClick, onItemClick = _$_object_spread.onItemClick;
+    var _$_object_spread = _object_spread({}, defaultProps$P, props), outerValue = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, style = _$_object_spread.style, placeholder = _$_object_spread.placeholder, shape = _$_object_spread.shape, className = _$_object_spread.className, disabled = _$_object_spread.disabled, maxLength = _$_object_spread.maxLength, clearable = _$_object_spread.clearable, readOnly = _$_object_spread.readOnly, autoFocus = _$_object_spread.autoFocus, backable = _$_object_spread.backable, right = _$_object_spread.right, left = _$_object_spread.left, leftIn = _$_object_spread.leftIn, rightIn = _$_object_spread.rightIn, tag = _$_object_spread.tag, inputProps = _$_object_spread.inputProps, onChange = _$_object_spread.onChange, onFocus = _$_object_spread.onFocus, onBlur = _$_object_spread.onBlur, onClear = _$_object_spread.onClear, onSearch = _$_object_spread.onSearch, onInputClick = _$_object_spread.onInputClick, onItemClick = _$_object_spread.onItemClick;
     var _usePropsValue = _sliced_to_array(usePropsValue({
       value: outerValue,
       defaultValue,
@@ -18881,7 +18961,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     ]);
     var renderField = function() {
       var inputCls = classNames("".concat(classPrefix2, "-input"));
-      return /* @__PURE__ */ React.createElement("input", {
+      return /* @__PURE__ */ React.createElement("input", _object_spread({
         className: inputCls,
         ref: searchInputRef,
         value: value2 || "",
@@ -18894,7 +18974,7 @@ Please add \`${key2}Action\` when creating your handler.`);
         onFocus: handleFocus,
         onBlur: handleBlur,
         onClick: handleInputClick
-      });
+      }, inputProps));
     };
     var renderValueByTags = React.useCallback(function() {
       if (!value2) {
@@ -19276,7 +19356,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     }
   });
   var Switch = function(props) {
-    var _ref = _object_spread({}, defaultProps$M, props), checked = _ref.checked, defaultChecked = _ref.defaultChecked, disabled = _ref.disabled, activeText = _ref.activeText, inactiveText = _ref.inactiveText, loadingIcon = _ref.loadingIcon, className = _ref.className, style = _ref.style, onChange = _ref.onChange, propLoading = _ref.loading, onLoadingChange = _ref.onLoadingChange, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$M, props), checked = _ref.checked, defaultChecked = _ref.defaultChecked, disabled = _ref.disabled, activeText = _ref.activeText, inactiveText = _ref.inactiveText, loadingIcon = _ref.loadingIcon, className = _ref.className, style = _ref.style, onChange = _ref.onChange, propLoading = _ref.loading, onLoadingChange = _ref.onLoadingChange, ariaLabel = _ref.ariaLabel, rest = _object_without_properties(_ref, [
       "checked",
       "defaultChecked",
       "disabled",
@@ -19287,7 +19367,8 @@ Please add \`${key2}Action\` when creating your handler.`);
       "style",
       "onChange",
       "loading",
-      "onLoadingChange"
+      "onLoadingChange",
+      "ariaLabel"
     ]);
     var classPrefix2 = "nut-switch";
     var rtl = useRtl();
@@ -19368,11 +19449,17 @@ Please add \`${key2}Action\` when creating your handler.`);
       };
     }();
     var _obj, _obj1;
-    return /* @__PURE__ */ React.createElement("div", _object_spread({
+    return /* @__PURE__ */ React.createElement("div", _object_spread_props(_object_spread({
       className: classes(),
       onClick,
       style
-    }, rest), /* @__PURE__ */ React.createElement("div", {
+    }, rest), {
+      role: "switch",
+      tabIndex: disabled ? -1 : 0,
+      "aria-checked": value2,
+      "aria-disabled": disabled,
+      "aria-label": ariaLabel
+    }), /* @__PURE__ */ React.createElement("div", {
       className: classNames([
         [
           "".concat(classPrefix2, "-button")
@@ -19402,7 +19489,7 @@ Please add \`${key2}Action\` when creating your handler.`);
   });
   var TextArea = /* @__PURE__ */ React.forwardRef(function(props, ref) {
     var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps$L, props), className = _ref.className, value2 = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps$L, props), className = _ref.className, value2 = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, viewId = _ref.viewId, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = _object_without_properties(_ref, [
       "className",
       "value",
       "defaultValue",
@@ -19416,6 +19503,7 @@ Please add \`${key2}Action\` when creating your handler.`);
       "style",
       "plain",
       "status",
+      "viewId",
       "onChange",
       "onBlur",
       "onFocus"
@@ -19489,6 +19577,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     });
     var _obj;
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+      id: viewId,
       className: classNames(classPrefix2, (_obj = {}, _define_property(_obj, "".concat(classPrefix2, "-disabled"), disabled), _define_property(_obj, "".concat(classPrefix2, "-readonly"), readOnly), _define_property(_obj, "".concat(classPrefix2, "-rtl"), rtl), _define_property(_obj, "".concat(classPrefix2, "-plain"), plain), _define_property(_obj, "".concat(classPrefix2, "-container"), !plain), _define_property(_obj, "".concat(classPrefix2, "-").concat(status), status), _obj), className)
     }, /* @__PURE__ */ React.createElement("textarea", _object_spread_props(_object_spread({}, rest), {
       ref: textareaRef,
@@ -19924,7 +20013,6 @@ Please add \`${key2}Action\` when creating your handler.`);
             case 3:
               _files = filterFiles(_files);
               tasks = _files.map(function(file) {
-                var _file_type;
                 var info = {
                   uid: idCountRef.current++,
                   status: autoUpload ? "uploading" : "ready",
@@ -19933,7 +20021,7 @@ Please add \`${key2}Action\` when creating your handler.`);
                   name: file.name,
                   type: file.type
                 };
-                if (preview && ((_file_type = file.type) === null || _file_type === void 0 ? void 0 : _file_type.includes("image"))) {
+                if (preview) {
                   var reader = new FileReader();
                   reader.onload = function(event2) {
                     fileListRef.current = _to_consumable_array(fileListRef.current).concat([
@@ -20328,6 +20416,8 @@ Please add \`${key2}Action\` when creating your handler.`);
     content: "",
     header: "",
     footer: "",
+    cancelBadge: "",
+    confirmBadge: "",
     confirmText: "",
     cancelText: "",
     closeOnOverlayClick: true,
@@ -20357,7 +20447,7 @@ Please add \`${key2}Action\` when creating your handler.`);
     }
   });
   var BaseDialog = function(props, ref) {
-    var _mergeProps = mergeProps(defaultProps$H, props), closeOnOverlayClick = _mergeProps.closeOnOverlayClick, confirmText = _mergeProps.confirmText, cancelText = _mergeProps.cancelText, children = _mergeProps.children, className = _mergeProps.className, closeIconPosition = _mergeProps.closeIconPosition, closeIcon = _mergeProps.closeIcon, content2 = _mergeProps.content, disableConfirmButton = _mergeProps.disableConfirmButton, footer = _mergeProps.footer, footerDirection = _mergeProps.footerDirection, header = _mergeProps.header, hideConfirmButton = _mergeProps.hideConfirmButton, hideCancelButton = _mergeProps.hideCancelButton, lockScroll = _mergeProps.lockScroll, overlay = _mergeProps.overlay, overlayStyle = _mergeProps.overlayStyle, overlayClassName = _mergeProps.overlayClassName, style = _mergeProps.style, title = _mergeProps.title, visible = _mergeProps.visible, zIndex = _mergeProps.zIndex, beforeCancel = _mergeProps.beforeCancel, beforeClose = _mergeProps.beforeClose, onClose = _mergeProps.onClose, onCancel = _mergeProps.onCancel, onConfirm = _mergeProps.onConfirm, onOverlayClick = _mergeProps.onOverlayClick;
+    var _mergeProps = mergeProps(defaultProps$H, props), closeOnOverlayClick = _mergeProps.closeOnOverlayClick, confirmText = _mergeProps.confirmText, cancelText = _mergeProps.cancelText, children = _mergeProps.children, className = _mergeProps.className, closeIconPosition = _mergeProps.closeIconPosition, closeIcon = _mergeProps.closeIcon, content2 = _mergeProps.content, disableConfirmButton = _mergeProps.disableConfirmButton, footer = _mergeProps.footer, footerDirection = _mergeProps.footerDirection, header = _mergeProps.header, cancelBadge = _mergeProps.cancelBadge, confirmBadge = _mergeProps.confirmBadge, hideConfirmButton = _mergeProps.hideConfirmButton, hideCancelButton = _mergeProps.hideCancelButton, lockScroll = _mergeProps.lockScroll, overlay = _mergeProps.overlay, overlayStyle = _mergeProps.overlayStyle, overlayClassName = _mergeProps.overlayClassName, style = _mergeProps.style, title = _mergeProps.title, visible = _mergeProps.visible, zIndex = _mergeProps.zIndex, beforeCancel = _mergeProps.beforeCancel, beforeClose = _mergeProps.beforeClose, onClose = _mergeProps.onClose, onCancel = _mergeProps.onCancel, onConfirm = _mergeProps.onConfirm, onOverlayClick = _mergeProps.onOverlayClick;
     var classPrefix2 = "nut-dialog";
     var locale = useConfig().locale;
     var _useState = _sliced_to_array(React.useState(false), 2), loading = _useState[0], setLoading = _useState[1];
@@ -20416,9 +20506,6 @@ Please add \`${key2}Action\` when creating your handler.`);
       var btnClass = hideCancelButton || hideConfirmButton ? "".concat(classPrefix2, "-footer-block") : "";
       var renderCancelOfVertical = function() {
         return !hideCancelButton && /* @__PURE__ */ React.createElement("div", {
-          style: {
-            order: 2
-          },
           className: "".concat(classPrefix2, "-footer-cancel ").concat(btnClass),
           onClick: function(e) {
             return handleCancel(e);
@@ -20426,17 +20513,43 @@ Please add \`${key2}Action\` when creating your handler.`);
         }, cancelText || locale.cancel);
       };
       var renderCancel = function() {
-        return !hideCancelButton && /* @__PURE__ */ React.createElement(Button, {
+        return !hideCancelButton && /* @__PURE__ */ React.createElement(React.Fragment, null, cancelBadge ? /* @__PURE__ */ React.createElement("div", {
+          className: "".concat(classPrefix2, "-footer-cancel-container")
+        }, /* @__PURE__ */ React.createElement(Button, {
           type: "default",
           size: "large",
           className: "".concat(classPrefix2, "-footer-cancel ").concat(btnClass),
           onClick: function(e) {
             return handleCancel(e);
           }
-        }, cancelText || locale.cancel);
+        }, cancelText || locale.cancel), cancelBadge ? /* @__PURE__ */ React.createElement("div", {
+          className: "".concat(classPrefix2, "-footer-cancel-badge")
+        }, cancelBadge) : null) : /* @__PURE__ */ React.createElement(Button, {
+          type: "default",
+          size: "large",
+          className: "".concat(classPrefix2, "-footer-cancel ").concat(btnClass),
+          onClick: function(e) {
+            return handleCancel(e);
+          }
+        }, cancelText || locale.cancel));
       };
       var renderConfirm = function() {
-        return !hideConfirmButton && /* @__PURE__ */ React.createElement(Button, {
+        return !hideConfirmButton && /* @__PURE__ */ React.createElement(React.Fragment, null, confirmBadge ? /* @__PURE__ */ React.createElement("div", {
+          className: "".concat(classPrefix2, "-footer-ok-container")
+        }, /* @__PURE__ */ React.createElement(Button, {
+          type: "primary",
+          size: "large",
+          className: classNames("".concat(classPrefix2, "-footer-ok ").concat(btnClass), {
+            disabled: disableConfirmButton
+          }),
+          disabled: disableConfirmButton,
+          onClick: function(e) {
+            return handleOk(e);
+          },
+          loading
+        }, confirmText || locale.confirm), confirmBadge ? /* @__PURE__ */ React.createElement("div", {
+          className: "".concat(classPrefix2, "-footer-ok-badge")
+        }, confirmBadge) : null) : /* @__PURE__ */ React.createElement(Button, {
           type: "primary",
           size: "large",
           className: classNames("".concat(classPrefix2, "-footer-ok ").concat(btnClass), {
@@ -20447,7 +20560,7 @@ Please add \`${key2}Action\` when creating your handler.`);
             return handleOk(e);
           },
           loading
-        }, confirmText || locale.confirm);
+        }, confirmText || locale.confirm));
       };
       return footer || /* @__PURE__ */ React.createElement(React.Fragment, null, footerDirection === "vertical" ? /* @__PURE__ */ React.createElement(React.Fragment, null, renderConfirm(), renderCancelOfVertical()) : /* @__PURE__ */ React.createElement(React.Fragment, null, renderCancel(), renderConfirm()));
     };
@@ -20462,7 +20575,10 @@ Please add \`${key2}Action\` when creating your handler.`);
       var systomIcon = closeIconPosition !== "bottom" ? /* @__PURE__ */ React.createElement(n$5, null) : /* @__PURE__ */ React.createElement(d$c, null);
       return /* @__PURE__ */ React.createElement("div", {
         className: closeClasses,
-        onClick: handleClose
+        onClick: handleClose,
+        role: "button",
+        "aria-label": locale.close,
+        tabIndex: 0
       }, /* @__PURE__ */ React.isValidElement(closeIcon) ? closeIcon : systomIcon);
     };
     var onHandleClickOverlay = function(e) {
@@ -22591,7 +22707,9 @@ Please add \`${key2}Action\` when creating your handler.`);
             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)),
-            style: _object_spread({}, contentStyle)
+            style: _object_spread({}, contentStyle),
+            role: "alert",
+            "aria-label": (title !== null && title !== void 0 ? title : "") + (content2 !== null && content2 !== void 0 ? content2 : "")
           }, this.renderIcon(), title && /* @__PURE__ */ React__namespace.createElement("div", {
             className: "".concat(classPrefix$a, "-title")
           }, title), content2 && /* @__PURE__ */ React__namespace.createElement("span", {